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.
- Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
- We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London
- Register Domain Name
- IT Support Bristol
- Web Design
- Website Designers - Compare quotes from local website designers
- Top Website Design Company CWD.
Get the Perfect Website! - Web Design Birmingham - Expert web design, marketing and support
- UK's white label Web Design specialist
- Affordable Web Design from EU Design Studio
CSS play Testimonial
"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