map が機能しない

<div><img src="images/topbar.gif" alt="" usemap="#map2" border="0"　/></div>
<map name="map2">
<area href="site.html" alt="" shape="rect"coords="394,57,495,68" />
<area href="toi.html" alt="" shape="rect" coords="510,57,605,68" />
</map>
上記のようにリンクを画像上に設置しましたが、ＩＥ６では機能しませんでした。
原因はalphafilter.jsというジャバスクリプトを使用していたからです。、これはサイトの外枠に影を入れるため、透過png の画像を使用したいためです。透過pngをＩＥ６で有効にするためにalphafilter.js
を使ったわけす。
mapを機能させるためにはalphafilter.jsを外さなければなりません。
ＩＥ６で外枠の影、map両方を機能させる良い方法はないでしょうか？
ＣＳＳハックでＩＥ６のみ透過gifを使うという方法はとりたくないです。何故なら透過gifは画像が粗いからです。

No.2 ベストアンサー 回答者： font_color 回答日時： 2009/04/30 03:08

alphafilter.jsについて調べてみましたが、どうやら

「usemap属性を使用したクリッカブルマップには未対応」
・・らしいです。
http://blog.webcreativepark.net/2007/02/01-23331 …

クリッカブルマップの属性についてはあまり詳しく無いので
私の考えられる対処法としては
1.別HTMLにクリッカブルマップ表示部を作成し、iframeで表示する。
【元HTML】（alphafilter.js使用）
<div><iframe src="map.html" height="" width=""></iframe></div>
【フレーム内HTML map.html】（alphafilter.js不使用）
<img src="images/topbar.gif" alt="" usemap="#map2" border="0"　/></div>
<map name="map2">
<area href="site.html" alt="" shape="rect"coords="394,57,495,68" />
<area href="toi.html" alt="" shape="rect" coords="510,57,605,68" />
</map>

2.divの背景に「images/topbar.gif」を指定してaの位置を指定する。
【html】
<div class="map">
<a href="site.htm" class="site">site</a>
<a href="toi.html" class="toi">toi</a>
</div>
【css】
div.map{
background:url(images/topbar.gif);
width:(画像の幅);
height(画像の高さ);
position:relative;
}
div.map a{
text-indent:-9999em;
display:block;
}
div.map a.site{
position:absolute;left:0px;top:0px;←リンクの位置
width:(リンクの幅);
height(リンクの高さ);
}
div.map a.toi{
position:absolute;left:0px;top:0px;←リンクの位置
width:(リンクの幅);
height(リンクの高さ);
}

といったところでしょうか。

この回答へのお礼

usemap属性を使用したクリッカブルマップには未対応とは
勉強不足でした。
なるほどiframeですか、font_colorさん詳細に書いていただいて
恐縮です。ありがとうございます。

お礼日時：2009/04/30 09:08

No.1 回答者： font_color 回答日時： 2009/04/30 00:32

どのように機能しないのか、どのような内容のjsファイルなのか、

良く分かりませんが、私も以前、IE6でのPNG透過用にDLしたjsを使って
レイアウトが崩れたことがあります。
原因は、使用していた画像にGIFがあったためと記憶しています。
「images/topbar.gif」をPNGにしてみてはいかがでしょうか？

この回答への補足

font_colorありがとうございます。
説明不足でした。mapが機能しないというのは、画像をクリックしても
リンクされないということです。alphafilter.jsはIE6でPNG透過を
有効にするものです。自分の場合レイアウトは崩れていないんです。
「images/topbar.gif」をPNGにしましたが、直らないです。

補足日時：2009/04/30 01:53