I have received a number of emails after publishing my first take/experiment on
CSS Image Maps. Feedback was both well received, as well as criticized. As you can imagine -- based on the "image sprite" method used for the first take -- much of the feedback centered around the use of this sprite, so to speak. While the CSS Image Map was useful in theory, creating stacked copies of the same image in Photoshop (or you graphic tool of choice) didn't seem like the ideal way of solving the issue.
So.... I went back to the drawing board, and came up with another solution that requires a single image, some CSS, and a little creativity! This second example makes use of transparent images (PNG images) to indicate an annotation on an image. Much of the same CSS from the first example was used, with a few minor alterations. Below is a sample of the old vs. the new:
CSS (Original):
dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }
dd#monitorDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #000;
background-color: #F4F4F4;
font-weight: bold;
position: absolute;
border: 1px solid #BCBCBC;
bottom: 100%;
margin: 0;
padding: 5px;
width: 250%;
}
CSS (Revised):
dd#oceanDef{ top: 165px; left: 63px; }
dd#oceanDef a{ position: absolute; width: 205px; height: 70px; text-decoration: none; border: 1px solid #FFFCE6; background: transparent url(note.png) repeat; }
dd#oceanDef a span{ display: none; }
dd#oceanDef a:hover{ background: transparent url(hover.png) repeat; border: 1px solid #BCBCBC; }
dd#oceanDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #000;
background-color: #F4F4F4;
font-weight: bold;
position: absolute;
border: 1px solid #BCBCBC;
bottom: 100%;
margin: 0;
padding: 5px;
width: 75%;
}
HTML:
<dl id="lalaLandMap">
<dt class="title">Manhattan Beach, California</dt>
<dt id="homes">1. Beautiful Homes</dt>
<dd id="homesDef"><a href="#"><span>How I would love an ocean-front property -- in LA!</span></a></dd>
<dt id="baywatch">2. Baywatch!</dt>
<dd id="baywatchDef"><a href="#"><span>Is that Hasselhoff?</span></a></dd>
<dt id="ocean">3. Ocean</dt>
<dd id="oceanDef"><a href="#"><span>This is the life...</span></a></dd>
</dl>