Comments on: CSS Image Maps With Pop-Up Tool Tips

By: Steve

Steve — Mon, 28 Dec 2009 18:54:40 +0000

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

By: Amy

Amy — Sun, 06 Dec 2009 01:14:51 +0000

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.

By: David Doherty

David Doherty — Tue, 17 Nov 2009 21:12:26 +0000

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

By: indika

indika — Tue, 20 Oct 2009 10:53:12 +0000

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;
}

By: Keith

Keith — Fri, 28 Aug 2009 19:05:31 +0000

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?

By: Charles

Charles — Wed, 26 Aug 2009 16:55:34 +0000

http://scheblerchimney.com/map_test.html

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

By: Patti

Patti — Sat, 01 Aug 2009 23:48:34 +0000

Sorry figured out my mistakes with the dots.

By: Patti

Patti — Sat, 01 Aug 2009 23:43:46 +0000

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

By: Patti

Patti — Sat, 01 Aug 2009 18:04:45 +0000

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.

By: Ron

Ron — Mon, 15 Jun 2009 00:43:18 +0000

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