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.

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!!!!

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

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?

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

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

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.

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

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?

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?

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

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.

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.

has anybody experience with poly shapes, instead of rectangles

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?

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

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!

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

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

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

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!

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.

Sorry figured out my mistakes with the dots.

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?

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).

Wembley

Header
Subtext
Subtext
Subtext

---------------

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

Regards

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