April 11, 2009

Objective

To highlight noteworthy (or otherwise functional) areas of an element on hover, as with image notes on Flickr.

Example

Method

This method uses a definition list (dl) to include the additional information over the image, in this case boxes and labels that are available when hovering. The dl itself is hidden by default, but some of its child elements become visible when mousing over the image. The definition term (dt) elements provide some semantics for the labels when CSS is unavailable, but these are otherwise not visible. The definition description (dd) elements establish the start position of the boxes and set one of the border colors (black) on each one. The anchors (a) construct the inner boxes within the dds and carry the second border color (white). The spans (span) contain the label text.

Markup

<div id="image">

<img src="/acooke/outlines/el_camino.jpg" alt="[El Camino detail]" height="482" width="720" />

<dl id="notes">
  <dt>Badge</dt>
  <dd id="note1"><a href="#"><span>[label text here]</span></a></dd>
  <dt>Headlights</dt>
  <dd id="note2"><a href="#"><span>[label text here]</span></a></dd>
  <dt>Grille</dt>
  <dd id="note3"><a href="#"><span>[label text here]</span></a></dd>
  <dt>Form</dt>
  <dd id="note4"><a href="#"><span>[label text here]</span></a></dd>
</dl>

</div> <!-- // image -->

CSS

#image {position:relative; height:482px; width:720px;}
#image:hover #notes {display:block;}
#notes {position:absolute; top:0; left:0; height:100%; width:100%; display:none;}
#notes dt {display:none;}
#notes dd {border:1px solid #000; position:absolute;}
#notes dd a {display:block; text-decoration:none; border:1px solid #FFF;}
#notes dd a span {display:none;}
#notes dd a:hover {background-color:transparent; border:1px solid #FF0;}
#notes dd a:hover span {
  background-color:#FF9;
  border:1px solid #FF0;
  color:#000;
  display:block;
  font:normal normal .8em/1.15 Helvetica,sans-serif;
  margin:.5em 0;
  max-width:230px;
  padding:5px;
  position:absolute;
  text-indent:0;
  width:auto;
  z-index:1000;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}
#notes #note1 {left:180px; top:180px;}  /* outline position */
#notes #note1 a {height:35px; padding:10px; width:183px;}  /* outline dimensions */
#notes #note1 a span {top:100%;}  /* label position */
#notes #note2 {left:190px; top:300px;}
#notes #note2 a {height:140px; padding:5px; width:400px;}
#notes #note2 a span {bottom:100%;}
#notes #note3 {left:10px; top:400px;}
#notes #note3 a {height:12px; padding:5px; width:100px;}
#notes #note3 a span {top:100%;}
#notes #note4 {left:400px; top:200px;}
#notes #note4 a {height:68px; padding:20px; width:250px;}
#notes #note4 a span {top:100%;}

Sources