View Full Version : CSS remote rollovers on image

Jun 5th, 2009, 11:19 AM

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.


I am trying to avoid flash..

Jun 5th, 2009, 12:50 PM

Try a javascript image map :)

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

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


Jun 5th, 2009, 05:23 PM
Not necessarily, I did something similar to what you are after here:

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.