Image Map rollovers Options

[DeaPeaJay]

Wow, I like this new board! This is leaps and bound better than the old one. Cool!

Anyway, My question is, I have to do an old school image map. I tried looking into a CSS solution. But CSS does not mesh well with polygons. So I had to resort to an image map. My question is, my SE team thought it would be nice if we could have hover effects over the various regions on the map.

Here's my map.
http://wcso.exit42design.com/index.php?reportType=crime (the upper left region is the only one defined so far)

And here's an example of what they want
http://www.worldofwarcraft.com/burningcrus...outlandmap.html

If the regions were all rectangular, it'd be easy to do CSS rollovers. I'm not sure how the WOW site does theirs, I'm assuming some sort of complicated ugly JavaScript. I'm just wondering if there's any ideas about how to do this clean and elegantly? I'm not holding my breath, I couldn't find anything online, but I thought I'd throw the question out there.

[pandy]

I can think of two ways. Either you can change the whole map image onmouseover. You'd need a set of images with different regions highlighted (or whatever effect you want). Or you can use JS+CSS to position smaller image over the map image onmouseover. Hm, something like that.

Then there is this. :-)
http://www.cssplay.co.uk/menu/imap.html

[DeaPeaJay]

Or you can use JS+CSS to position smaller image over the map image onmouseover. Hm, something like that.

Actually, that might work! You'd have to have 20 some odd divs absolutely positioned over the map with a background-image of the highlighted region. They'd all be display: none, and then the javascript would set the display to "on" onmouseover.

hmm,,,, still a lot of work, but it might be the best solution. And there shouldn't be any delay either.

Then there is this. :-)
http://www.cssplay.co.uk/menu/imap.html

I don't understand those first two image maps. They look horrible and don't make a lick of sense to me. The image just turns into an ugly mess when you mouse over it.

[DeaPeaJay]

I don't understand those first two image maps. They look horrible and don't make a lick of sense to me. The image just turns into an ugly mess when you mouse over it.

Wait a minute, I guess that's just Safari that messes it up. Here's what it looks like in Safari: http://www.exit42design.com/stuffDirectory/CSSMess.png

It works in Netscape, Opera and Firefox..... weird. I've never had Safari mess up when all other browsers worked

[pandy]

I don't understand those first two image maps. They look horrible and don't make a lick of sense to me. The image just turns into an ugly mess when you mouse over it.

What browser are you using? It works in IE so I assumed it would work in "anything".

[Christian J]

Wait a minute, I guess that's just Safari that messes it up. Here's what it looks like in Safari: http://www.exit42design.com/stuffDirectory/CSSMess.png

It works in Netscape, Opera and Firefox..... weird. I've never had Safari mess up when all other browsers worked

I just took a quick look at the Snow White example at http://www.cssplay.co.uk/menu/imap.html and it appears to use this pseudo-rollover technique: http://www.wellstyled.com/css-nopreload-rollovers.html --doesn't the latter page's example work in Safari either?

I also seem to recall an earlier version of Safari had a bug with CSS background-position, where swapping places with the position value pair seemed to fix it.

[Frederiek]

I just took a quick look at the Snow White example at http://www.cssplay.co.uk/menu/imap.html and it appears to use this pseudo-rollover technique: http://www.wellstyled.com/css-nopreload-rollovers.html --doesn't the latter page's example work in Safari either?

I also seem to recall an earlier version of Safari had a bug with CSS background-position, where swapping places with the position value pair seemed to fix it.

Works like a charme in the latest Safari.
So does this: http://www.alistapart.com/articles/sprites/

[DeaPeaJay]

I just took a quick look at the Snow White example at http://www.cssplay.co.uk/menu/imap.html and it appears to use this pseudo-rollover technique: http://www.wellstyled.com/css-nopreload-rollovers.html --doesn't the latter page's example work in Safari either?

I also seem to recall an earlier version of Safari had a bug with CSS background-position, where swapping places with the position value pair seemed to fix it.

Works like a charme in the latest Safari.
So does this: http://www.alistapart.com/articles/sprites/

The background-positioning works fine in Safari. That's what I use! It works onthe wellstyled site, and on examples given on alistapart. It just doesn't on the cssplay example. Frederiek, did the two top maps on cssplay work for you in safari? If so, what would make your safari different from mine? I have 2.0.4

[Frederiek]

Frederiek, did the two top maps on cssplay work for you in safari? If so, what would make your safari different from mine? I have 2.0.4

No, the cssplay samples don't work in my Safari. No wonder, as I have the same version (2.0.4) as you.

[DeaPeaJay]

Ok, back to my original question. I've now got an image map with a javascript onmouseover to display a div tag that highlights the selected portion of the map as seen here,

http://wcso.exit42design.com/index.php?reportType=crime

only the top left region works right now. The problem is that the onmouseout of the image map doesn't work because the division tag is on top of it, so I had to put the onmouseout on the division tag instead. The problem is that the area that the onmouseout applies to now is a square, and not the polygon that I had defined in my image map.

So, as far as i can think through it, there's no way around this. Unless I can make the div on top of the image transparent to the cursor somehow. Any ideas?

This post has been edited by DeaPeaJay: Sep 24 2006, 06:45 PM

[pandy]

What about this simplistic approach? Make the beige color in the map image transparent. Use the same color as a CSS background color for the image instead. Make a number of CSS classes referring to a set of background images. These background images should be same as the map with the relevant region highlighted and the rest of the image erased and transparent. These images will be very small in spite of there pixel size. Now, on mouseover change the class of the IMG tag.

You may need to use a DIV to hold the background color. I don't remember but it's in the back of my head that IE didn't support backgrounds on images before 6 (or 5.5).