[javascript] areaタグで画像の切り替え+リンクをjsでやる方法。

今日一日はまった。。

関数を呼び出す形の場合、ie系（ie6、7、8）だとOnMouseOutとかOnClickが動かない。。よって関数を呼び出さない、下記の方法へ変更。

• imgタグには↓のようにnameを指定する。
  <img src="/img/menu00.jpg" usemap="#MC" name="MapChange" border="0" /></
  nameを指定しないとsafariなど一部ブラウザで動作しません。

↓この画像4つを今回は使用する。

実行サンプル

<script type="text/javascript">

function MapLoad() {
  Img01 = new Image();
  Img01.src = "/img/menu01.jpg";

  Img02 = new Image();
  Img02.src = "/img/menu02.jpg";

  Img03 = new Image();
  Img03.src = "/img/menu03.jpg";
//↑↑↑画像を事前に読み込む
}

</script>
<div onload="MapLoad()"><img src="/img/menu00.jpg" usemap="#MC" name="MapChange" border="0" /></div>
<map name="MC">
  <area onmouseover="MapChange.src='/img/menu01.jpg'" onmouseout="MapChange.src='/img/menu00.jpg'" shape="rect" coords="0,0,120,40" href="http://www.google.co.jp/" />
  <area onmouseover="MapChange.src='/img/menu02.jpg'" onmouseout="MapChange.src='/img/menu00.jpg'" shape="rect" coords="121,0,240,40" href="http://www.google.co.jp/" />
  <area onmouseover="MapChange.src='/img/menu03.jpg'" onmouseout="MapChange.src='/img/menu00.jpg'" shape="rect" coords="241,0,360,40" href="http://www.google.co.jp/" />
</map>

• 参考
  areamapとロールオーバー