CSS Image Maps, Redux

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>