CSS Image Maps, Redux

Skip to Example

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:

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%;
}

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%;
 }

	
<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>

A working example can be viewed below (the image below was taken on my trip to Los Angeles (what an amazing city!):

Again, while this may not be the most "ideal" solution out there, it certainly expands upon the previous method of stitching/stacking multiple copies of the same image together. The only downfall I've encountered with this method is in my use of PNG files for the annotation transparencies. As you may, or may not, know, IE's support for transparent images is pretty shady. I've attempted using Cameron Adam's IE PNG Filter Hack, but for some odd reason, I can't get IE to properly display the transparency. If you'd like to take a stab at it, please feel free to grab the code and hack away... I'd love to hear about your successes! This is the filter I've tried applying in the CSS:

	
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hover.png',sizingMethod='scale');

If you have any questions, concerns, and/or suggestions for improvement, please feel free to send me a note: frankmanno [-at-] gmail [-dot-] com or leave a comment on my blog.

The examples have been succesfully tested in Safari and Firefox (Mac/Win). If you're able to test this out on other browsers, please send me a note, and I'll update the listing.

Translations:

This article has been translated into the following languages:

• French, by Vicky Rotarova.
• Romanian, by Web Geek Science.
• Russian by Everycloudtech

If you'd like to translate it into another language, feel free to contact me with a link to the translated version.