このサンプルは、スタイルシートを使用してイメージマップを実装しています。イメージにマウスを移動するとビートルズの顔にホットスポットが表示されます。ホットスポット上にマウスを移動すると名前と説明が表示されます。このサンプルは、イメージにホットスポットを追加するときに利用すると便利です。JavaScritを一切使わないでCSSのみで実現できます。
Tip1: イメージのホットスポットの位置(x,y)は、Windowsに同梱されているペイントソフトを利用すると便利です。
Tip2: anchor要素をクリックしても飛ばしたくないときは、href属性に「#nogo」を設定します。
このサンプルで使用しているイメージです。イメージ右クリックしてダウンロードしてください。