PDA

View Full Version : CSS remote rollovers on image



ferellie
Jun 5th, 2009, 11:19 AM
Hello,

I have a map with 6 locations on and I am trying to get create small hotspot over each location which on hover displays a div containg a few paragrphs about that location. The informatios divs should all appear in the same place not relative to the hotspot.

Any help would be great as I seem to be getting nowhere.
Thanks,

Ferellie

I am trying to avoid flash..

Kristofa
Jun 5th, 2009, 12:50 PM
http://www.w3schools.com/js/js_image_maps.asp

Try a javascript image map :)

ferellie
Jun 5th, 2009, 12:58 PM
Thank you.

Maybe I was trying to overcomplicate it by using just CSS!

Ferellie

Rowsdower!
Jun 5th, 2009, 05:23 PM
Not necessarily, I did something similar to what you are after here:
http://rowsdower.freehostia.com/other/?page=css_tool_tips

It doesn't actually use an image map though. It uses a <ul> with absolutely positioned <li> elements, so if rectangular hover sections won't work then this is not going to be right for you. If you're OK with rectangles then you can place a detail section of any size any place on the page that you want to.

The only real drawback so far is that initial setup is a pain in the rear because of the unique absolute positioning and sizes for each <li>. Once it's set up though, things should be fairly bullet-proof.