image maps with onmouseover, onmouseout, and onclick

[jhherring]

If this more properly belongs in the JavaScript forum please let me know and I'll re-post it there.

I have an image map, and I want the various hotspots within it to appear in one state when the mouse is over them, another state when the mouse is not over them, and a third state when they're clicked -- but keeping that third state until another area is clicked.

So, as I see it, the image map should load normally, and each hotspot should have an <AREA> tag defined, with onmouseover and onmouseout states defined as with any normal rollover. But when I add the onclick event handler, the image does change to the onclick state, but does not stay that way -- because of the onmouseout!

How can I get the hotspots to each have this behavior? default (same as onmouseout) = state 1, onmouseover = state 2, and onclick = state 3 and stay that way until another hotspot is clicked?

Thanks for any help you can provide.

John Herring
jhherring@yahoo.com

 

[starway]

Mouseover and mouseout states swaps images: one image is placed instead of the other one. This is not applicabple to imagemaps since it's one image and you cannot replace a part of it.
You have two options:
1. Reload the entire image with a new one that highlights current area that was selected.
2. Split the image into pieces and place them inside the cells of a table. In this case you don't need imagemap at all - you'll deal with an ordinary swap image scripts.

 

[cian]

Following on from what Starway said I would recommend option 2, its very easy to set up and maintain and gives you lots of control over each individual hotspot!

Also
option 3: an image map which uses onmouseover, to call up another image over the hotspot! I have a script I can give you BUT 1. I haven't tested it 2. it's probably a dog to load and I think the images you call up need to be the same size as the image map!



É

http://www.endamcg.com/finland-gaa

 

[jhherring]

Thanks for the replies, but this problem was completely solved in the JavaScript forum just the other day. Turns out that it was fairly easy (for a guru, anyway) to show me exactly what I needed, which does, in fact, require swapping out the entire image map with every mouseover and mouseout and click. But this is OK -- it's a very small image used for the map, and swapping it out to show its different states was (a) exactly what I had wanted, but probably failed to state in my original post, and (b) absolutely necessary, as it turns out -- the graphic effect I was looking for could not have been achieved with individual buttons. Had to be an image map.

Anyway, problem solved, and thanks to all who responded!

John Herring
jhherring@yahoo.com