Below is a sample image map that's built entirely using CSS and XHTML.

CSSだけでイメージマップを作る有用サンプル。
画像の特定部分にカーソルを合わせると、説明を画像上に表示できるCSSとXHTMLサンプルが公開されていました。
JavaScript を一切使っておらず、CSSだけで実現されているところがすごいですね。



JavaScript が要らず、次のような綺麗なHTMLで実現できるところも嬉しいですね。
実装も簡単そうです。

<dl id="officeMap">
<dt id="monitor">1. Monitor</dt>
<dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor. I wish I had an LCD!</span></a></dd>
<dt id="phone">2. Phone</dt>
<dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd>
<dt id="case">3. PC Case</dt>
<dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd>
<dt id="notebook">4. IBM ThinkPad</dt>
<dd id="notebookDef"><a href="#"><span>Here's my Linux notebook. Some crazy coding going on.</span></a></dd>
<dt id="floppy">5. External Floppy Drive</dt>
<dd id="floppyDef"><a href="#"><span>Floppy Drive. Ancient... I know!</span></a></dd>
</dl>

知っておけば絶対に使えるテクニックだと思うので覚えておきましょう。