Image Map With Pure CSS Tooltips Tutorial
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>
