IE6でpng画像にロールオーバーする時に動かなかったので、そのときに調べたことのメモ。
JSの記述を書き換えれば動くようになりました。
IE6でpngを使うとき
私はIE6でpngを使うときはDD_belatedPNGを使っています。
これはJSを読み込んであとは<head>の中などに以下を記述すればいいだけなので、とても簡単に実装できます。
<script type="text/javascript">
DD_belatedPNG.fix('img, .png_bg');
</script>
しかしこれと合わせて次のJSを使いpngをロールオーバーしようとするときにIE6で困ったことになります。
画像のロールオーバー
そして、画像のロールオーバーするときに使っているJSが以下になります。
function smartRollover() {
if(document.getElementsByTagName) {
var images = document.getElementsByTagName("img");
for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match("_off.")){
images[i].onmouseover = function() {
this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
}
images[i].onmouseout = function() {
this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
}
}
}
}
}
if(window.addEventListener) {
window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", smartRollover);
}
画像名の最後(拡張子の前)が_offの画像をオンマウスすると_onの画像に切り替わるというものです。
問題点
この2つを使ってpngの画像をロールオーバーしようとしてもIE6では動きません。何度試しても動かなかったので、相性がわるいのかなと思ってましたが
原因はこれでした。
<img>要素を非表示にして、VMLの要素を前に挿入することで、今まで<img>があったところにVMLを使って画像が表示されるようになります。普通の<img>要素の描画ではPNGを透過させられないのに対し、VMLの描画では透過させられるということを利用しているわけですね。見つけた人はすごい!
ここで、JSが動かない理由がわかってきたでしょうか。<img>要素に対してイベントハンドラを設定しても、<img>要素は非表示になっており、見えているのはVMLで表示されている画像なのです。これでは<img>要素に設定したイベントハンドラは動作しませんね。
解決方法
というわけで、さきほどの問題点が書いてあるサイトにも書いてありますが、解決するには以下のコードを書き換えれば書けばOKです。
<script type="text/javascript">
DD_belatedPNG.fix('img, .png_bg');
</script>
以下のものに修正
<script type="text/javascript">
var oldFixPng = DD_belatedPNG.fixPng;
DD_belatedPNG.fixPng = function (el) {
oldFixPng(el);
if (el.vml && el.vml.image.fill.getAttribute("src").match(/_off\./)) {
el.vml.image.shape.attachEvent('onmouseenter', function() {
var image = el.vml.image.fill;
image.setAttribute("src", image.getAttribute("src").replace("_off.", "_on."));
});
el.vml.image.shape.attachEvent('onmouseleave', function() {
var image = el.vml.image.fill;
image.setAttribute("src", image.getAttribute("src").replace("_on.", "_off."));
});
}
};
DD_belatedPNG.fix('img, .png_bg');
</script>
コメント
Excellent elements?I’d note that due to somebody who seriously doesn’t develop with blogging sites a great deal (truly, this is my very own very first post), My wife and i don’t take on the time period lurker is amazingly being towards a non posting representative. It’s possibly not your own defect in the least , in each probability your blog may come up with a more, non crazy discover of the ninety of folks which take delight in following a few possibilities stuff .
Great stuff from you, man. Ive read your stuff before and youre just too awesome. I love what youve got here, love what youre saying and the way you say it. You make it entertaining and you still manage to keep it smart. I cant wait to read more from you. This is really a great blog
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts.Any way Ill be subscribing to your feed and I hope you post again soon It’s pretty simple with the dishwasher.
Have you ever regarded adding more videos for your weblog posts to maintain the readers extra entertained? I mean I just read through the entire post of yours and it was very very good but since I’m further of a visual learner,I found that being significantly more useful nicely let me know how it turns out! I really enjoy what you men are constantly up too. Such clever operate and reporting! Keep up the very good functions men I’ve added you guys to my blogroll. This is a wonderful post thanks for sharing this useful info.. I will check out your blog frequently for some latest post
I was very encouraged to find this site. I wanted to thank you for this special read. I definitely savored every little bit of it and I have you bookmarked to check out new stuff you post.
This is a pretty decent blog site. I have been back a couple of times during the last few days and want to join your feed using Google but find it difficult to ascertain the way to do it very well. Would you know of any sort of guides?
Wonderful story! Ive been searching google for many hours searching for applicable data on th is, they undoubtedly require to position your website on the initially web page!