Ask Experts Questions for FREE Help !
Ask
    NeedKarma's Avatar
    NeedKarma Posts: 10,635, Reputation: 1706
    Uber Member
     
    #1

    Sep 11, 2007, 07:39 AM
    I need to overlay icons over an image, how do I do that?
    I don't want to use Photoshop to merge the images. Here's what I want to do: I have a provinvial map and an icon that I want to moave arounfd the map weekly to show a location. I also would like to keep the alt text feature of the icon. How would I do this with Nvu (or what html coding would allow this)?
    jstrike's Avatar
    jstrike Posts: 418, Reputation: 44
    Full Member
     
    #2

    Sep 11, 2007, 09:10 AM
    Regular CSS should suffice.
    Set the z-index of icon to something like 10 then use the positional attributes top and left to display the image where you want it.
    Attached is a very quick example, change the .txt to .html and you should be all set.
    Attached Images
      
    Attached Files
  1. File Type: txt viewMap.txt (943 Bytes, 258 views)
  2. NeedKarma's Avatar
    NeedKarma Posts: 10,635, Reputation: 1706
    Uber Member
     
    #3

    Sep 11, 2007, 09:23 AM
    I'm such a noob when it comes to coding html 'cause I rarely have to do it. Through research I figured it was CSS and z-index related but I can't code my way out of a wet paper bag :) so I found a shareware that will allow me to drag images to overlap others. Thanks, I have the text file and will pore over it to try and understand it whern I'm less under the gun.

    Cheers!
    jstrike's Avatar
    jstrike Posts: 418, Reputation: 44
    Full Member
     
    #4

    Sep 11, 2007, 11:59 AM
    If you strip the code down to the bare essentials, this is all you need.
    Code:
    <html>
    <head>
      <title>Map Demo</title>
      <style>
        .pin {
          position: absolute;
          top: 423;
          left: 428;
        }
      </style>
    </head>
    <body>
    <img src="map.gif"/>
    <img src="pin.gif" class="pin"/>
    </body>
    </html>
    class="pin" assigns the attributes in the style sheet for .pin to the image.

    All you have to do to move the pin around is change top and left attributes in the CSS. The "position: absolute" attribute is necessary to position the pin properly, if you omit it the position attributes are relative to where the image appears on the page rather than the top left corner.

    top:0; left:0; is the upper left corner.
    NeedKarma's Avatar
    NeedKarma Posts: 10,635, Reputation: 1706
    Uber Member
     
    #5

    Sep 11, 2007, 12:10 PM
    Thanks mate. The "position: absolute" was playing havok with our template in which I inserted the code. I decided ona less pretty route: I'll put the icons on the image in Photoshop, merge it all into one image, then use image mapping to remake the linkable hot spots.
    jstrike's Avatar
    jstrike Posts: 418, Reputation: 44
    Full Member
     
    #6

    Sep 11, 2007, 01:23 PM
    Weird... as long as the only thing you apply it to is the icon it shouldn't give you troubles. It also depnds on your target browsers too... I'm not sure how Safari will respond to that code.

    Front end work is such a pain...
    retsoksirhc's Avatar
    retsoksirhc Posts: 912, Reputation: 71
    Senior Member
     
    #7

    Sep 11, 2007, 01:26 PM
    Quote Originally Posted by jstrike
    Weird...as long as the only thing you apply it to is the icon it shouldn't give you troubles. It also depnds on your target browsers too...I'm not sure how Safari will respond to that code.

    Front end work is such a pain....
    Hehe... that's why I prefer PHP. Just make a template and let someone else edit the actual display of the page, and then you write everything that makes it work.

    Speaking of which, if you know how to code in PHP, you could use the image extensions to overlay pictures. I think it's called the GD2 library.

Not your question? Ask your question View similar questions

 

Question Tools Search this Question
Search this Question:

Advanced Search

Add your answer here.


Check out some similar questions!

Changing Icons [ 8 Answers ]

The Icon in My Computer for the D: partition changed somehow and I can't seem to change it back, in the properties there is no personalize tab as there is in normal folders. The partion work as normal so it's only a question of the look. :rolleyes: I would thank you if you have any ideas, David10

Where did my icons go? [ 5 Answers ]

I am hoping I can find an answer here.. It all started when I needed to do an Excel sheet in Microsoft Office. It said that there had been a recent change in the application and I needed to reinstall the program from the CD. I can't find the CD so I decided to do a restore to an earlier time...

Taskbar Icons [ 4 Answers ]

I have a problem with the taskbar icons on a computer I am working on. They are abnormally small. The rest of the screen looks fine but the icons down in the bottom right hand corner of the screen next to the time and the quick launch toolbar are tiny. The icons are so small that, on the right...

Icons [ 1 Answers ]

Is there a way to hide the application icons in my computer? Every time I installed something (i.e. softwares) a new icon is created. I just have so much that it filled the whole monitor. Plssss help me.


View more questions Search