Stu Nicholls | CSSplay | CSS image mapped map

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

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

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.