人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

透過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に設定するとリンクがきくといった内容もありましたが、うまくいきませんでした。

●質問者: 雨の日
●カテゴリ:ウェブ制作 学習・教育
✍キーワード:absolute background CSS Expression FIX
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● pahoo
●35ポイント

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

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


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

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

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


2 ● redwing1
●35ポイント

IE7から

http://adp.daa.jp/archives/000644.html

◎質問者からの返答

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

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

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


3 ● nagase
●10ポイント

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ