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.
Recommended Sites
- VPS Hosting
Virtuozzo VPS Hosting - $19.95/mo - Web design in Dorset
Bournmouth based web design agency - SEO
First Rate - Australian SEO Company - SEO Company
SEO company based in Manchester - web hosting, dedicated servers
web reseller, managed servers
"The 
web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth
CSS play pages
