透過pngをバックグラウンドにしてpositionをabsoluteにした際、透過pngの上にあるリンクが押せない現象に関して、回避方法をご存知の方は教えて下さい。

■透過pngに関して参考にしたサイト
http://blog.l-xs.com/yungsang/2007/02/png_ie_ie7.html

■javascript
<script type="text/javascript" src="iepngfix.js"></script>

■css
#test {
position: absolute;
top: 10px;
left: 100px;
width: 100px;
height: 100px;
background: url(test.png);
}
* html #test {
behavior: expression(IEPNGFIX.fix(this));
}

■xhtml
<div id="test"><a href="http://www.hatena.ne.jp/">リンク</a></div>

※リンク箇所に関してpositionをrelativeに設定するとリンクがきくといった内容もありましたが、うまくいきませんでした。

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2008/05/26 17:20:02
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答3件)

id:pahoo No.1

回答回数5960ベストアンサー獲得回数633

ポイント35pt

Photoshopで作成した透過型PNG画像を使い、手持ちの WindowsXP(SP3) + IE7 では正常にリンクを押下できました。

気になった点を2点ほど――。


background: url(test.png);
background-image: url(test.png); の typo でしょうか?
<div id="test">
⇒classセレクタを使って、.test { ~ <div class="test"> とした方が良いのではないでしょうか。
id:finnapple

すみません、一点肝心な説明が抜けていました。IE7やfirefox等では問題ありません。

IE6でリンクが押せなくなります。

2008/05/19 19:50:48
id:redwing1 No.2

回答回数541ベストアンサー獲得回数3

id:finnapple

回答ありがとうございました。

リンク先の内容を確認したところ「IE6」は透過pngを使わずに別対応するという内容でした。

今回の私の件に関しては「IE6」でも透過pngを利用するところまではきているのですが、background且つposition: absolute;の場合、背景の上に重なっているリンクが機能しないことに対する対応策が知りたいです。

2008/05/22 10:37:22
id:m_nagase No.3

回答回数58ベストアンサー獲得回数8

ポイント10pt

http://www.yomotsu.net/wp/?p=400

ここによると、position に absolute または relative が指定されている要素に

AlphaImageLoader を使うと、その子要素の a 要素や onclick,onmouseover などが

絶対に効かなくなるということらしいです。

透過pngをやめるか、positon:absoluteをやめるか、あるいはflashなどで作成するしかないようです。

  • id:finnapple
    ご回答ありがとうございました。やはりAlphaImageLoader等のjavascriptでは難しいようですね。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません