- 締切済み
透過pngを表示するスクリプトとロールオーバー
トップページのタイトル画像を透過させてロールオーバーさせたいです。 --- 透過pngを使いたかったのですが、使用しているブラウザに対応していなかったので、どうにか表示させる方法を探していました。 そしてたどり着いたのは(http://www.designwalker.com/2006/12/transparent-png.html)のサイトのスクリプトなのですが、画像をロールオーバーさせるJavaScriptには対応していないのでしょうか。 <A href="t_off.png"><img src="t_off.png" onMouseOver="this .src='t_on.png'"onMouseOut="this .src='t_off.png'"></A> ↑これです/ロールオーバーに使用しているタグ CSSでのロールオーバーも考えた(挑戦した)のですが、タイトル画像で大きさを掴みにくく、中々上手く指定が出来ません。 CSSではリンクに触れた際に背景の画像をずらすことになると思うのですが、同じサイトの透過pngを背景画像で使うスクリプトでは、大きさを指定しなくてはならず、上手に出来ませんでした。 (そのスクリプトなしでは成功しました) --- 一つのサイトのプログラムのことなので、ここで質問すべきではないのかも知れませんが、あちらでは場違いになりそうなので、ここに書かせて頂きました。 カテゴリもまたがっているので、もしも問題がありましたら、ごめんなさい。 よろしければ、ご回答お願いします。 --- 使用ブラウザ:Sleipnir 1.66 画像編集ソフト:Adobe Photoshop Elements 5.0
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2280)
簡単には無理だと思いますよ。 IEではfilterを使って透過していますので、 <img onmouseover="this.src='t_on.png'"> ではなく、 <img style="filter:progid:(略).AlphaImageLoader(src=t_on.png);"> このsrcを書き換えなければならないと思います。
- osamuy
- ベストアンサー率42% (1231/2878)
pngfix.jsを見ると、タグimgの属性styleに対し動的にAlphaImageLoaderを追記したHTMLを組み立て、outerHTMLを上書きする模様。その際、全ての属性をフォローしてないので、属性onMouseOver等がキャンセルされてるのでは。 OuterHTML全体だけでなく、img要素のプロパティstyleだけを書き換えるとかで何とかなるかも。 試さないで書いているから、なんともならないかも。