CSSPLAY

CSS DEMOS › An image mapped map

Date : 6th June 2007

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Menorca
The 'click to show' version

Menorca
The 'hover to show' version

Information

I understand from your emails that a lot of you are using my image map method for giving information on map locations, where each location is represented by a small dot and when this is clicked a description of the locations pops up at a fixed position on the map but placed such that it does not obscure the map.

Using my previous examples you would be required to enter the absolute positons of the small dots then calculate the position of the pop-up text relative to each dot.

You would also need to tackle the IE problem of z-index.

Well this is one answer to the problem that only requires the position of the dot to be entered with an absolute position. The text is then popped up without any need to calculate it's relative position.

The map image is saved in jpg format and placed in the background of the outer div. The RED dots are saved in gif format and are placed in the background of the <ul>. This way the dots will have solid color and accurate positioning.

Tested in IE6, IE7, Firefox, Netscape, Mozilla and Opera. Opera users will need to keep the mouse button held to see the pop-up information.

7th June 2007

The second version added which works by hovering over each hotspot. The hover persists even after the mouse has moved off the spot.

An extra tag is necessary to make this work in IE (of course).

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.