最近めっきり使用頻度が少なくなってきたと思われる、イメージマップ（クリッカブルマップ）。
イメージマップとは
簡単に言うと、1枚の画像の中に複数のリンクを貼る場合に使用したりします。
例えば、右サムネの赤枠にそれぞれ違ったリンク先を指定したい時など。
で、それぞれのリンクでマウスを乗せた時、マウスオーバーで画像を差し替える方法をご紹介します。
CSSではなく、jQueryを使用します。
イメージマップを作成する方法は割合します。
今回は、四角形や楕円ではなく、多角形を使用しています。
まず『jQuery』の本体がなければ話しにならないので、以下のサイトからダウンロードします。
そして、HTML（XHTML）内に記述するコードは以下。
HTML
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function over(num) {
$("#imgmap img").attr({src:"map_over_"+num+".jpg"});
}
function out() {
$("#imgmap img").attr({src:"map.jpg"});
}
</script>
</head>
<body>
<div id="imgmap">
<img name="map" src="map.jpg" border="0" id="map" usemap="#im_imgmap" alt="イメージマップ" />
</div>
<map name="im_imgmap" id="im_imgmap">
<area shape="poly" coords="10,50,25,65,75,300,40,280" href="リンク先URL" title="タイトル" alt="タイトル" onmouseover="over(10)" onmouseout="out()" />
</map>
</body>
</html>赤・青・緑の箇所は自由に変更してください。
但し、青＝青、緑＝緑は同じでなければいけません。
一応、その他の箇所も自由に変更できますが、同じコードの所は同じにしてください。
上記の例ですと、『map.jpg』が元の画像になり、リンクオーバーの画像が『map_over_10.jpg』になります。
分かり易い（？）ように、元画像は『div』タグで囲っています。
マウスオーバーする画像は1つ1つ別に用意しなければいけませんが、『map_over_**.jpg』と番号を変えるだけで各リンクに対応するようになります。
Flashで作った方が早いとか何とかありますが、Flashが使えなかったり、持っていなかったり、そこまでする必要がなかったりとかする場合にこの方法が使えると思います。
スライスで分けれれば一番楽なんですけどねー。
