![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
<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>
上記のようにリンクを画像上に設置しましたが、IE6では機能しませんでした。
原因はalphafilter.jsというジャバスクリプトを使用していたからです。、これはサイトの外枠に影を入れるため、透過png の画像を使用したいためです。透過pngをIE6で有効にするためにalphafilter.js
を使ったわけす。
mapを機能させるためにはalphafilter.jsを外さなければなりません。
IE6で外枠の影、map両方を機能させる良い方法はないでしょうか?
CSSハックでIE6のみ透過gifを使うという方法はとりたくないです。何故なら透過gifは画像が粗いからです。
No.2ベストアンサー
- 回答日時:
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さん詳細に書いていただいて
恐縮です。ありがとうございます。
No.1
- 回答日時:
どのように機能しないのか、どのような内容のjsファイルなのか、
良く分かりませんが、私も以前、IE6でのPNG透過用にDLしたjsを使って
レイアウトが崩れたことがあります。
原因は、使用していた画像にGIFがあったためと記憶しています。
「images/topbar.gif」をPNGにしてみてはいかがでしょうか?
この回答への補足
font_colorありがとうございます。
説明不足でした。mapが機能しないというのは、画像をクリックしても
リンクされないということです。alphafilter.jsはIE6でPNG透過を
有効にするものです。自分の場合レイアウトは崩れていないんです。
「images/topbar.gif」をPNGにしましたが、直らないです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
レスポンシブ対応のHTML・CSS(...
-
ボタンをセル内一杯に表示させ...
-
htmlで画像を2個ずつ並べていき...
-
隙間が空かないタグ
-
【HTML/CSS】ボタンの枠が伸び...
-
機種依存文字、m2(平方メート...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
1時間30分を簡単に表したいで...
-
smallにtext-allignが効かない
-
【ヒトの神秘】美男美女から何...
-
NからZへの全単射を具体的に構...
-
HTML属性での「""」 「''」違い
-
<h1>、<h2>と<p><div>の行間を...
-
css li の改行について
-
2個のFormを横並びにしたい
-
含む含まないという概念自体の...
-
CSS、width100%でもできる余白
-
リストマーカーをボックス内に...
-
widthやheightの数値に単位(px...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
XML画像データををHTMLで簡単に...
-
【HTML/CSS】ボタンの枠が伸び...
-
UDP通信を使うチャットプログラ...
-
リンクを選択したときの青い枠...
-
favicon.ico はもういらない?
-
table で画像をピッタリとくっ...
-
CSSの左横に隙間ができてしまい...
-
HTMLのIMAGEに。。
-
ホームページで画像を横に並べ...
-
画像とテーブルの隙間をなくす。
-
リンクをつけた画像をクリック...
-
HTMLは、シングルクォートかダ...
-
縦長広告をウェブページの右側...
-
c言語を用いて画像の透明度をあ...
-
ホームページタグ打ち。サイズ...
おすすめ情報