イメージマップの作り方

イメージマップ(クリッカブルマップ)は、普通は

<img src="xxx.jpg" usemap="#mapname">
<map name="mapname">
  <area shape=rect coords="xx,xx,xx,xx" href="./xxx1.html">
  ...
</map>

というようにやると書いてある。しかし、これをさらに、リンクの上にマウスカーソルが来たときに何かハイライトするようにしようと思ったのだが、うまくいかない。(area element の hover とか何とかうまくいかない。)

web を探したら、次のように画像を background に指定してやる方法が見つかった。

<dl class="imagemap">
  <dt>...</dt>
  <dd id="p1"><a href="./xxx1.html"><span>1</span></a></dd>
  ...
</dl>

に css を次のように指定する。

dl#imagemap{
        background: transparent url(xxx.jpg) top left no-repeat;
        width: 800px;
        height: 1200px;
        position: relative;
        }
dt{position: absolute;display: none;}
dd{position: absolute;}
dd#p1 {left: 50px; top: 250px}
dd#p1 a{position: absolute; width: 700px; height 40px}
dd a:hover{position: absolute; outline: solid 1px #0000ff;}
dd a span{display: none;}
dd a:hover span{display: inline;}

つまり、dd の中の a に hover しているときに outline を出し、さらに、span の中の字を枠の端に出す。

dl を使っているのは本質的でない。ようするに、a 要素で全部やるということだ。img + map のスタイルシート指定はブラウザーの方がダメダメなんだろう。