画像毎に違うクリッカブルマップを設定したい
地図画像を表示して複数のクリッカブルマップを配置し、ユーザが選択したら、詳細地図を表示してさらにそこでもクリッカブルマップを配置して、、、
という階層的に地図を辿られるようなコンテンツをつくろうと思っています。
JavaScriptで制御できると思って以下のようなコードを書いたのですが、
初期画像において、クリッカブルマップ(alt=area1)を押せば正常に動作しますが、
もう一方のクリッカブルマップ(alt=area2)を押すと、
IE6の場合にエラーが発生してブラウザが終了してしまいます。
尚、FireFoxでは正常に動作します。
どこに原因があるかも分らず手詰まり状態です。
同じ現象にあわれた方で解決策をご存知の方がいらっしゃれば、ご教授下さいm(_ _)m
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<script type="text/javascript">
<!--
function ChangeImg(mapname,usemapname)
{
document.map0.src = mapname;
document.map0.useMap = usemapname;
}
//-->
</script>
</head>
<body>
<img src="map0.jpg" width="300" height="300" name="map0" useMap="#usemap0">
<map name="usemap0">
<area href="JavaScript:ChangeImg('map1.jpg','#usemap1')" shape="rect" alt="area1" coords="10,100,140,200">
<area href="JavaScript:ChangeImg('map2.jpg','#usemap2')" shape="rect" alt="area2" coords="150,100,290,200">
</map>
<map name="usemap1">
<area href="http://google.co.jp" shape="rect" alt="shop1" coords="50,50,250,250">
</map>
<map name="usemap2">
<area href="http://yahoo.co.jp" shape="rect" alt="shop2" coords="50,50,250,250">
</map>
</body>
</html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
圧縮率…がイマイチよくわかんないです。すんません。フォトショップでトリミングしたりサイズを小さくしてるので、余白のことはわかるんですが…。フォロー頂けたら幸いです。