Picnic Website Code Tutorials

Image Map With Pure CSS Tooltips Tutorial

View Demo (NSFW)

Nice huh? That was a fun little demo to make! In order to add another tooltip "hotspot", just create a class for each additional anchor and give it a different position - it's that simple!

If you want to place your image map in the html as an <img> rather than a background image in the CSS then you must also add background:url(fake.jpg); to the anchor. Just the CSS code - no actual image required! That is, if you also DON'T have a "hotspot", like an image, text, etc, as the designated hover area on your image map. Otherwise, IE6/7/8 and Opera will not show the tooltip when the anchor is hovered over. Now go stare at Jessica Biel's butt for a very long time like I did...

The CSS

#map {
position:relative;
height:494px; /* height of image map */
width:298px; /* width of image map */
margin:20px auto;
background:url(image-map.gif);
}
a:hover {
visibility:visible; /* Fixes IE6 Bug */
}
.tooltip { 
position:absolute;
top:335px;
left:50px;
height:105px;
width:188px;
text-decoration:none;
color:#000;
} 
.tooltip span { 
position:absolute;
left:-999em; 
opacity:.6; /* FX/Opera/Safari/Chrome */
-ms-filter:"alpha(opacity=60)"; /* IE8 */
filter:alpha(opacity=60); /* IE6/IE7 */
border-radius:8px;
box-shadow:#000 2px 2px 6px;
} 
.tooltip:hover span, .tooltip:focus span {
left:40px;
top:-60px;
width:95px;
padding:10px;  
border:2px solid #000;
background:#999;
}
		

The HTML

<div id="map">
<a href="#" class="tooltip"><span>Tooltip</span></a>
</div>
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top 5 Donators

Friends of Mine