CSS Image Maps With Pop-Up Tool Tips


Using an unordered list, a couple of images, and a little CSS, we can create an accessible “image map” with pop-up tool tips that provide our readers more information on the links the map contains. There are several techniques out there for doing this, but, unlike some, the one outlined here has the advantage of working in older versions of Internet Explorer.

To begin, we’ll need two images, the first one being our image map, and the second one being a 1px by 1px transparent GIF image, which we’ll use as a background image for the map’s “hot spots” in order to work around a bug in earlier versions of IE.

Here’s the image I’ll be using for the map itself:

Image M ap

Now we can move on to the HTML. Essentially, what we’ll do is create an unordered list of links that each contain a span tag which holds information about the link for our tool tip pop-up. We’ll give each link its own class name, so that we can define the area and position for the link’s hot spot on the image.

Here’s the HTML for my map.

[html]

[/html]

Now let’s move on to the CSS, starting with the list itself, which we’ve given the ID of “map.” We want to set the margin and padding for our list to zero and then we want to define the size of the list, which should be equal to the size of the image we’re using for our map (in this case, 400×200 pixels). Then we’ll set that map image as the background. I’m also defining some font styles here, so I don’t have to do it later.

[css]
#map {
margin:0;
padding:0;
width:400px;
height:200px;
background:url(map.jpg) top left no-repeat #fff;
font-family:arial, helvetica, sans-serif;
font-size:8pt;
}
[/css]

Then we’ll do the list items themselves– simple stuff, just get rid of the formatting applied by the browser.

[css]
#map li {
margin:0;
padding:0;
list-style:none;
}
[/css]

Now we need to apply some styling to the links. Each link will need its own dimensions and positioning (which is why we gave them class names), but they’ll also share some common properties, like the fact that they should be absolutely positioned block elements, with the transparent GIF for their background.

[css]
#map li a {
position:absolute;
display:block;
/*
Specifying a background image
(a 1px by 1px transparent gif)
fixes a bug in older versions of
IE that causeses the block to not
render at its full dimensions.
*/
background:url(blank.gif);
}
[/css]

Next, we simply need to hide the span inside of our links.

[css]
#map li a span { display:none; }
[/css]

After we’ve done that, we need to define the style, size and position of the tool tip itself. We need to make it visible on mouse over and it should be relatively positioned in relation to the link we’re hovering over, with a bit of an offset (20px x 20px in this case). Then we’ll make it look pretty, giving it a white background, a border, padding, and lower the opacity slightly, so you can still see what’s under the tool tip. We’ll set a width of 200px, but we’ll let the height be automatically determined by the amount of content in the tool tip. We’ll also set the color of the text and get rid of the underline.

[css]
#map li a:hover span {
position:relative;
display:block;
width:200px;
left:20px;
top:20px;
padding:5px;
border:1px solid #000;
background:#fff;
text-decoration:none;
color:#000;
filter:alpha(opacity=80);
opacity:0.8;
}
[/css]

Now all that’s left is to define our link hot spots and set the size and position of the links, by class name, that correspond with the images. You’ll have to do a little bit of measuring here, just as you would with any image map. Just find X, Y coordinates where the top left corner of the hot spot should be, and then determine the height and width from there.

[css]
#map a.bunny {
top:20px;
left:60px;
width:80px;
height:90px;
}

#map a.parrot {
top:1px;
left:275px;
width:50px;
height:50px;
}

#map a.snail {
top:135px;
left:30px;
width:50px;
height:50px;
}

#map a.dog {
top:100px;
left:150px;
width:115px;
height:95px;
}

#map a.cat {
top:65px;
left:315px;
width:70px;
height:120px;
}
[/css]

The final image map can be viewed here.

Blogging

{ 65 comments… add one }

65 comments on “CSS Image Maps With Pop-Up Tool Tips

  1. mowgli on said:

    wow..fantastic….that means no more worries about these things in javascript…thanks a lot…I will apply on my projects…!!!!

  2. Great work! Thank you for providing this.

    I am new to working with css, but I would really like to adapt this for use on a web page layout that is not static. My layout repositions itself whenever the browser window is resized. This is great for my layout remaining in proper perspective, but this throws off the location of all the tool tips. I’m sure the fix for this is probably not extremely difficult, but so far I am at a loss. Ideas?

    I notice that the method employed at http://www.frankmanno.com/ideas/css-imagemap/ works well on a layout that is not fixed, but the code looks a little bloated.

  3. The address above is not yet live…but I need to do an image map with rollovers for neighborhoods that this builder builds in. I LOVE the code you’ve written here, it’s clear and simple and works amazingly well.

    However, I have a question I’m hoping you can help me with. We use a proprietary software to build sites so that our clients can easily maintain them. When I put your image and code in…it shows up…but the rollovers are all the way up in the left corner of the screen…rather than being where the image is. The image shows up in the center of the web page…but the only way to get the rollovers to appear is to move the cursor around up in the corner…then they show up. Any suggestion to correct this? I have moved the coordinates for “dog” and it works ok now…just wondered if that’s what will need to happen to the rest…coordinates need to be for the page as a whole rather than for the image?

    test page: http://www.redsageonline.com/default.aspx?id=562

    thanks so much!!!!

  4. CSSHowTo.com on said:

    In firefox all your rollovers work where they are supposed to, except for the dog!!

    Yes the figures have to be adjusted slightly depending on your page and other styles within the page.

  5. Great work.
    Very helpful to avoid javascript.
    Thank you.

  6. Hey, this is excellent!
    The only problem I am having is that my list text shows up all the time. When I mouse over the block, it changes form into the pretty little tooltip box, but when I mouseout, it’s just this ugly text covering up my image. Any idea why? =/

  7. I figured out my problem, but I am still having another issue: the same one that Teresa and JM had above. Has anyone found a fix for this?

  8. CSSHowTo.com on said:

    Do you have a link?

  9. Use this instead to move the image around (Thanks Teresa / Redsage )

    #map {
    position:relative;
    margin:0;
    padding:0;
    width:400px;
    height:250px;
    background:url(../images/map.jpg) no-repeat #fff;
    font-family:arial, helvetica, sans-serif;
    font-size:8pt;
    }

  10. Stefano on said:

    Uhm … using this in Safari 3.04 I get same problems with text tooltips not on the image and so on.
    With last CSS code for #map it seems work only if you put list UL inside a DIV with position:relative.

  11. web designs on said:

    this is great, i’ve been looking for an accesble way of using images maps and callouts without using javascript. Well done

  12. Wow…this is really cool.

    I am really impressed about how easy it was to implement this.

    and thank you for the relative position patch for the map….

  13. CSSHowTo.com on said:

    Excellent work guys, thanks for the community feedback in helping with the problems, this is what the Web is all about.

    Glad you are all finding it helpful.

  14. Quentin on said:

    Only two of my five hotspots work! I’ve checked and re-checked everything but can’t figure out where the problem lies. Any help appreciated!

    Cheers

  15. CSSHowTo.com on said:

    I notice from the CSS file that there are some non standard characters that have gotten into the file, coincidently around all the classes that are not working, things like
    Ê Ê Ê Ê

    You can see it better here
    http://www.quentinjamesdesign.co.uk/strategy/css/screen.css

    Delete those characters from the CSS file and you should find it works fine. ;)

    regards
    Paul

  16. Quentin on said:

    Wow! Those pesky characters don’t appear in BBEdit!

    Thanks Paul.

  17. I seems like a good plan but you didn’t tell us where to put these different parts; within whta tags? Do we just pile them upone behind another withing the body tag?

  18. mike k on said:

    It does seem to have spotty results in IE7, some of my hotspots work while others do not. Worked well in firefox though. I think this can be improved upon in IE7 by setting the display of “li a.span” to block, with an opacity of 0, and giving it a laid out width. This greatly improved the behavior on IE7 for me. More info here: http://www.quirksmode.org/css/opacity.html

    Thanks, Mike.

  19. Derek on said:

    I can’t get this working in IE6 (even the final image map sample).
    Has anyone else come across this issue?
    Is there a fix?

  20. CSSHowTo.com on said:

    Hi Mike,
    thanks for posting the fix, although I cannot find any problems with the demo in IE7, if you have a particular link to problematic page, then please post it.

    Derek, I don’t currently have access to IE6 so cannot retest, originally it all worked fine, but I will get an VNC session set up with a IE6 machine and get back to you hopefully.

  21. Derek on said:

    Hi, and thanks,
    Has anyone had a chance to test/debug this in IE6?

  22. CSSHowTo.com on said:

    Hi Derek, Please dont post comments twice as it gives me twice as much work to do when approving them. All comments are approved before appearing.

    I used IE6 on Win xp with SP2 and the image map worked fine. Could you provide some more information on the URL you are using it on and what systems you are using.

  23. Derek on said:

    Hi, and apologies for the double post.
    I’m using XP IE6.0 SP2….

    I’m in a corporate environment, and it appears there’s a problem with our machines, not your code.

    I just checked out the page on our testing machine and it works great.

    I’m so sorry to have wasted your time.

    Please keep up the great work.

  24. CSSHowTo.com on said:

    No Worries, im just glad you got it fixed/sorted!

  25. This code was just what I needed for a tutorial I’m working on, thanks!

    The problem that I’m having is that the image I’m using it with is centered and needs to stay that way to be consistent with other pages in the tutorial. When the window is max’d the hotspots are to the left of the images.

    Did anyone come up with a resolution for this issue?
    I’m having the problem in both IE6 and Firefox.

  26. Great Tutorial! I’ve been looking for this type of thing.

    I am wondering if there is someway to have an additional link within the as I’m using this technique on a property map so that when the user selects a unit, it opens the window with an image, a description and hopefully, a link to a .pdf of a floorplan.

    Any advice?

    Thanks!

  27. stoffel on said:

    has anybody experience with poly shapes, instead of rectangles

  28. Hello I have a question: Is it possible to use an image instead of a text tooltip? So when you roll over the spot you can show an image.

    thnx

  29. Link is in name.

    I’ve done this for one hotspot so far and it works fine in Firefox. I tested in IE7 and the hotspot is ten pixels or so lower than where it is supposed to be.
    Can someone help me with this?

  30. Bronwyn on said:

    so i might just be a complete moron, but i cant seem to get the darn text-decoration off my tooltips.

    i clearly have text-decoration:none set, and i even changed that around to blink and then back again to test, and it did blink, alright. I just have no idea how to get rid of that darn link underline on my tool tips. i might start crying. eep.

  31. Bronwyn on said:

    yep. im a moron. i fixed it by poppin’ that code into the actual a.cat part. okee. i should seriously go home now.

    p.s. great code. clean and easy to manipulate. you surely are very very awesome :)

  32. Is there a way to get to put a link in the pop up text?

    For example:
    Bunny RabbitCute and fuzzy, with long ears and a fluffy tail. this cuddly bunny makes a great pet.mrbunny@bunny.com

    I’ve tried escaping out the quotes:
    mrbunny@bunny.com
    but I can’t get it to work.
    thanks

  33. Toledoh on said:

    Hi there.

    Instead of a blank.gif, I’m using an icon to display… easy enough.

    However, I was hoping to vary the displayed icon… thinking a class in the would work. Can you suggest anything?

    ie.

    ....
    ...

    ...

    then in the css… something like (????)

    #map li a {
    position:absolute;
    display:block;
    background:url(icon.gif);
    }

    #map current li a {
    position:absolute;
    display:block;
    background:url(current.gif);
    }

    thanks!

  34. Hi,

    Mostly this is working okay. I have this implemented on 8 links on an image to emulate the tool tips usually done in Javascript.

    However, on one of the eight links, I am getting a small thin line at the top and bottom, even though I am using the 1px blank.gif image to compensate.

    Anyone else run into this where it works for everything except for one?

  35. Larry on said:

    Great technique. Just what I needed for a navigation tool on website redesign.

  36. Maryann on said:

    I would also like to know how to add a link within the pop up text! I tried some things, but nothing has worked so far.

  37. Z.K. on said:

    I was just wondering about this hover code. I am using Visual Studio 2005 as an editor and it puts a red line under the filter and opacity and says that they are not a known CSS property. Any ideas as to why.

    #map li a:hover span {
    position:relative;
    display:block;
    width:200px;
    left:20px;
    top:20px;
    padding:5px;
    border:1px solid #000;
    background:#fff;
    text-decoration:none;
    color:#000;
    filter:alpha(opacity=80);
    opacity:0.8;
    }

  38. Z.K. on said:

    Okay, I have it partially working. The tooltips show up okay and I can click the links okay, but for some reason my image does not show up, it is all white. Any ideas how to fix this.

  39. ontarget on said:

    I would like to know of a fix for ie, some computers’ ie works fine but some older ones are “off” a bit.
    Thanks

  40. in my website layout i center the map image to fit into the layout, and it seems to be throwing off the specific placement defined in #map a.example

    i had to hunt and peck at ridiculous coordinates to get the links to line up.

    has anyone else ran into this problem?

  41. blue_8019 on said:

    As stoffel commented earlier, does anyone have experience using this with polygon shapes?

    I need to implement something just like this (the java I am using puts the links/menus to the left or bottom of the screen) using a territory map of North America. The java version also does not work in Safari.

    Any help here would be greatly appreciated. Thanx!

  42. Dude, you rock! This is so awesome. I am using it for our office floorplan, with pop-ups for each employee. SOOOO easy!

  43. Patti on said:

    Thanks for the code. I just have one problem. I trying to insert an image instead of a text pop-up. I get the title and the size of the box by I can’t get the image to show up on the roll-over.

    Thanks again.

  44. Okay now I have the image, but I have the list order dots

  45. Sorry figured out my mistakes with the dots.

  46. Charles on said:

    http://scheblerchimney.com/map_test.html

    Comes up fine in Safari and Firefox but Not IE 8. Any ideas?

  47. I am using the code and really like it. But it seems I can not get more than 6 links to show up at once. Meaning if I code 10 links only the last 6 will show up linked on the image.
    Any ideas?

  48. can someone please explain why position used “absolute” to “#map li a”

    #map li a{
    display:block;
    position:absolute;
    background-image:url(spacer.gif);
    text-decoration:none;
    color:#000;
    }

    and later used position “relative” to “#map li a:hover span”

    #map li a:hover span{
    display:block;
    position:relative;
    width:200px;
    left:20px; top:20px;
    padding:5px;
    border:2px solid #CCC;
    background:#fff;
    filter:alpha(opacity=80);
    opacity:0.8;
    }

  49. David Doherty on said:

    Great work, but I am having real trouble with this in IE, so I wonder if you could help? I have taken your code and am trying to pop up a menu based on hotspots. All seems to render well in FF but will not work in IE. I would complain about IE but the code does not pass CSS validation, as I am trying to nest UL and LI elements within your original tags (which is wrong, of course).

    Is there any chance you cna let me know how this can be done?

    For example, my HTML code looks like this:

    Wembley

    Header
    Subtext
    Subtext
    Subtext

    —————

    This renders very badly in IE so any help would be appreciated.

    Regards

  50. Thank you for this, this is a really great concept. My problem is, I am trying to use it on a dynamic (asp) page, and the image displays differently in IE than in Firefox once the server builds the page. If I code the links based on their placement in FF, they show up in the wrong place in IE, and vice versa. I’ve tried changing the positioning between relative/absolute and various other fixes, and I can’t figure out how to make the links relative to the map UL OR the [a] anchor such that the coords stay the same regardless of whether IE adds more padding to the header-sidebar etc. The URL of my test page is above on my name (so far only “Albuquerque” “Alamogordo” and “Ruidoso” are actually coded).

    Plus I don’t really understand why the text is displaying in different places when I am trying to get it to line up in one place along the right side of the map, but I can live with that if I could just get it to work across browsers.

    Thanks to anyone for any suggestions.

  51. Very cool code. I have one small problem – the tool tips show up upon hovering but there is a white box for all hotspots. Any idea on how to eliminate those?

    Thanks,

    Steve

  52. Worked perfectly!

    I’m very happy with the results as this was exactly how I’d envisioned the web page to look for our company.

    Thanks a million.

  53. lesley on said:

    This seems to work in all browsers except IE8. It will work if you switch the compatibility view, but if you dont, then the popup textboxes do not show as hyperlinks. Has anyone been able to fix this?

  54. works perfekt, except in IE6.
    is there a solution for this problem. i testet its in opera, chrome, ie7, ie8, ff3..only ie6 has his problems with it :(

  55. Hello.
    this is the best tutorial there is on this subject in the web.
    thank you so much !
    i do have one question:
    i use this in my Thesis-based nav-menu and i was wondering if maybe there a way to add a search box to the code ?
    thanks again :)
    Oren

  56. Phil Ellis on said:

    So here’s my question. This worked great, but because I have some images overlapping, the square dimensions in css don’t quite cut it. Is there anyway to use coordinates like a regular image map does?

    If not, I’ve worked around it using multiple squares for one image, but it’s a bit clunky.

  57. I added
    z-index:-1; to #map li a span
    and
    z-index:1; to #map li a:hover span

    to avoid jumping out of the box when hovering over a different animal. I like it better that way, but I’m not sure what the right values for z-index should be. Also, only tried in Firefox.

    Cheers,
    John

  58. Anyone else experiencing a ‘shift’ of the hot spots between Safari(5.03) and Firefox(v3.6)? The shift is about 100 pixels to the left. Any thoughts about what I might be doing wrong?

  59. Works great… Tried it in IE6,IE8, Chrome and Firefox with no problems… thanks a zillion ;-)

  60. mykul on said:

    Hey!
    Awesome stuff!
    Having an issue where a it’s at the right side of the page and the box is getting cut off from the div.

    Thanks!

  61. Mandeep on said:

    Here is another tutorial on how to achieve an image map in css. html crazy – how to create an image map in css

  62. I couldn’t find the answer to the question: How to insert an image instead of a text pop-up. Do anyone have a solution for that?

  63. Good start to a tutorial.

    Some issues to overcome: Elastic websites. This will not scale with text size (change text size moves the defined area). maybe using EM’s instead of PX will help

    Also IE works, MOZILLA puts box defined area to the right and CHROME puts the box to teh left (again, maybe the scaling the text size page causes the issue)

  64. Incredible! This truly is incredible! Thanks to this, I’ll get an A on my motherboard project for my shop!

  65. Ahmad Najiullah on said:

    nice tutorial,…

    thanks,…

    ^_^

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

Leave a Comment