画像の一部をクリックできるようにするタグの使い方を紹介します。
マウスオーバー時に画像を差替える場合、下記のようなJavaScript を導入する必要があります。
<script type="text/javascript">
<!--
function imgHover(evt, elm) {
var r, t = evt.target || evt.srcElement;
if (!(r = t.getAttribute("rel"))) return;
document.getElementById("AreaMap").src = "./img/" + r + ".jpg";
elm.getElementsByTagName("AREA")[0].href = t.href;
}
//-->
</script>
<img id="AreaMap" src="img/map.jpg" alt="地図" usemap="#imagemap">
<map name="imagemap" onmouseover="imgHover(event, this)">
<area shape="rect" coords="22,22,85,85" href="#area1" alt="area1" rel="area1">
<area shape="rect" coords="118,118,182,182" href="#area2" alt="area2" rel="area2">
<area shape="rect" coords="0,0,204,204" alt="地図" rel="map">
</map>