CSS mouse over

[olsen]

I am looking for code where I don't use the neatly lined up thumbnails but instead, circles with coordinates (x, y and radius) spread over a map. Ihope somebody can help.

[Medyman]

What you're looking for is an image map. Here (http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479741) is a tutorial to create one.

Find the coordinates etc.. can be kind of annoying without some tools. I sometimes use this (http://www.maschek.hu/imagemap/imgmap) online image map editor to write the coordinates.

[olsen]

Thank you very much for your reply and help. I do have a map with circles that are coordinated and I can call up another html file from each circle. What I need to know is how I can mouse-over a circle on the map and an image shows up instead.

[jscheuer1]

CSS cannot do this with an image map, javascript (using onmouseover and onmouseout events) should be able to.

Often in javascript (when no image map is involved) we just find the position of the element that the mouse is over. However, with an image map, different browsers see things quite differently, with some seeing the position of the area tag, which is good, but others seeing the position of the entire map.

Another frequently used method is to track the position of the mouse.

You would need to do that, see:

http://www.quirksmode.org/js/events_properties.html#position

or figure out a way to track the position of the area tag in those browsers which don't report it accurately.

[olsen]

Thank you very much, seems I have some work to do, but I don't mind that, it is very enjoyable to learn new things, 'code wise' in particular. Thanks again.

[jscheuer1]

The script from this thread:

http://www.dynamicdrive.com/forums/showthread.php?t=33058

a modification of:

http://www.javascriptkit.com/script/script2/simpleimagetrail.shtml

might work. Any script (perhaps with some modification to work with area tags) that tracks the mouse instead of the element that the mouse is over would do.

[olsen]

Thank you very much, I'll try it.