クリッカブルマップについて

質問

クリッカブルマップについて教えていただきたい点がございます。
例えば、以下のような記述をした場合。

■例
<a href="***.html">
<img src="***.jpg" alt="***" width="***" height="***" border="0" usemap="#Map" />
</a>

<map name="Map" id="Map">
<area shape="rect" coords="***" href="***.html" alt="***" />
</map>

エリア指定した部分以外のところは<a>タグでのリンクになり、エリアで指定している部分はそのURLになるかと思うのですが、Firefoxですとうまく遷移するのですが、IEだとクリックしてもエリア指定した部分しかページ遷移をしてくれません。

※ブラウザ左下のマウスオーバー時にでるURLは飛び先を認識しているのですが、クリックしても反応が無いのです。。。

IEはshape="default"にも対応していないようですし、一部分のみをエリアで指定し、それ以外のところは全体的に別のリンクを指定したい場合、どういった記述をすればよいのでしょうか？

shape="poly"で囲んでも問題は無いのですが、あまり見た目が良くないので。。。

また、これよりも良い方法があるなど、ご存知の方がいらっしゃいましたら、ご教授いただけますと幸いでございます。

-----------------------------------
私が制作時に確認をしているブラウザのバージョンは次の通りです。
Firefox：3.6.12
IE：8.0
-----------------------------------

何卒よろしくお願いいたします。

回答No.1

yyr446 · ベストアンサー

ご提示の例のやり方の方がむしろ、見た目が良くないし、スマートじゃない
と思います。IEでshape="default"はありませんが、文書中で先に現れた領域
の方が優先されますから、shape="rect"でも代用できます。

※古いIEにも対応させた例（map内に<div>要素があると<area>は無視されます）。

<object data="***.jpg" type="image/jpg" usemap="#map1">
　<map name="map1">
　　<div>
　　　<a href="all.html" shape="rect" coords="0,0,xxx,xxx">all</a>
　　　<a href="bubun.html" shape="rect" coords="0,0,50,50">bubun</a>
　　</div>
　　　<area href="all.html" alt="all" shape="rect" coords="0,0,xxx,xxx">
　　　<area href="bubun.html" alt="bubun" shape="rect" coords="0,0,50,50">
　</map>
</object>

お礼

お礼が大変遅くなってしまい誠に申し訳ございません。
こちらの方法を参考とさせていただきまして、大変助かりました！

ありがとうございました！