下記の方法でランダムバナーを表示させたいのですがIEで動きません。FireFox、safariではきちんと動いています。setAttributeがいけないというところまでわかったのですがどのように修正したらいいでしょうか？
function init(){
var alt = new Array() ,banner = new Array() ,EXTENSION ,htmlImg = {} ,i ,idx ,myImg = {} ,PATH ,str ,url = new Array();
PATH = "images/";
EXTENSION = ".png";
banner = ["test01" ,"test02" ,"test03" ,"test04" ,"test05"];
alt = ["test01" ,"test02" ,"test03" ,"test04" ,"test05"];
url = ["test01.html" ,"test02.html" ,"test03.html" ,"test04.html" ,"test05.html"];
setTimeout("init()",4000);
for(i = 0; i < 3; i++){
idx = Math.floor(Math.random() * banner.length);
myImg[i] = new Image();
myImg[i].src = PATH + banner[idx] + "_on" + EXTENSION;
htmlImg[i] = document.getElementById("bn" + i);
htmlImg[i].setAttribute("src", PATH + banner[idx] + EXTENSION);
htmlImg[i].setAttribute("alt", alt[idx]);
htmlImg[i].setAttribute("onmouseout", "this.src='" + PATH + banner[idx] + EXTENSION + "';");
htmlImg[i].setAttribute("onmouseover", "this.src='" + myImg[i].src + "';");
htmlImg[i].parentNode.setAttribute("href", url[idx]);
No.1
444
74
125pt
ご質問のスクリプトが途中で途切れてしまっていますが、IEの場合はイベント処理のところを以下のように記述してみてください。
1
1
setAttribute("onmouseout", new Function("this.src = PATH + banner[idx] + EXTENSION"));
setAttribute("onmouseover", new Function("myImg[i].src"));
No.2
49732154
125pt
IE と、別のブラウザで、コードの区別を付けたくないなら、
htmlImg[i].setAttribute("onmouseout", "this.src='" + PATH + banner[idx] + EXTENSION + "';"); htmlImg[i].setAttribute("onmouseover", "this.src='" + myImg[i].src + "';");
の二行を、
htmlImg[i].onmouseout = (function() { var s = PATH + banner[idx] + EXTENSION; return function() { this.src = s; } })(); htmlImg[i].onmouseover = (function() { var s = myImg[i].src; return function() { this.src = s; } })();
こんな感じに変更。
No.1 の返信にあるように、addEventListener() を使いたいなら、
var f = (function() { var s = PATH + banner[idx] + EXTENSION; return function() { this.src = s; } })(); try { htmlImg[i].addEventListener("onmouseout", f, false); } catch(e) { htmlImg[i].attachEvent("onmouseout", f); } f = (function() { var s = myImg[i].src; return function() { this.src = s; } })(); try { htmlImg[i].addEventListener("onmouseover", f, false); } catch(e) { htmlImg[i].attachEvent("onmouseover", f); }
流れが見えるように、addEventListener と attachEvent の使い分けを繰り返し書いてますが、
他にも onload で同じようなことをやってるので、別の関数として切り出した方が良いでしょうね。
返信遅くなってしまい、申し訳ありません。
上記の方法で試してみたのですがうまく作動しなかったです。。
きっと私の認識不足なため変な風に直そうとしているんだと思います。
Cherenkovさんのコメントを参考に全文下記にアップしました。
JS
https://gist.github.com/1178979
HTML
https://gist.github.com/1178999
リンク付き画像10点からHTML上で初期値3点を記述し、4秒ごとにランダムで切り替わるようにしたいのです。
Cherenkovさん、ご丁寧にありがとうございます。
みなさまの優しさと自分のふがいなさに泣けてきます。
お手数お掛けしますが、よろしくお願いします。
No.3
49732154
125pt
No.2 の回答で書いた内容をつけくわえたソースを github に置きました。
https://gist.github.com/1180040 … javascript
https://gist.github.com/1180044 … HTML
元のソースを尊重して、イベントハンドラのところだけ修正してます。
a-kuma3さん
返信遅くなってしまい、申し訳ありません。
windowsXP IE6で確認しているのですがランダムに切り替わる＆オンマウス時の動きが全くなく初期値のままなのです。ウィンドウの下の部分では（ページが表示されましたと出ている部分）ランダムに画像を読みにいっているのですが。。他にこのページに
<script type="text/javascript" src="common/js/jquery.js"></script>
<script type="text/javascript" src="common/js/styleswitcher.js"></script>
<script type="text/javascript" src="common/js/lineup.js"></script>
<script type="text/javascript" src="common/js/scroll.js"></script>
TINY.scroller.init('scroll','scrollcontent','scrollbar','scroller','buttonclick'); </script>
$(document).ready(function() { $("ul#nav li").hover(function() { //Hover over event on list item $(this).css({ 'background' : ' url(common/images/gnavi.png) left -66px no-repeat'}); //Add background color and image on hovered list item $(this).find("span").show(); //Show the subnav } , function() { //on hover out... $(this).css({ 'background' : 'none'}); //Ditch the background $(this).find("span").hide(); //Hide the subnav }); }); </script>
<script type="text/javascript" src="common/js/jcarousellite.js"></script>
//<
No.4
1504493
125pt
どうやらDD_belatedPNG.jsをいれると
画像の切り替わりができなくなってしまうようです。。
問題を切り分け、エラーメッセージ等を書きましょう。
今いまくいかないのはDD_belatedPNG.jsが原因？他のJSですか？
情報の小出しはいけません。
コピペで再現するコードを提示しないのはエスパー回答を強いられるので大変です。
（透過PNGの用意もめんどくさい）
Cherenkov
2011/08/29 15:19:17
a-kuma3
salt-00
2
2
1
早々の回答ありがとうございます。500文字まででしたので途中までにしてしまいました。。以下続きの部分です。上記のようにしてみたのですがやはりうまくいきません。
delete banner[idx];
str = banner.join(",");
str = str.replace(/,,/, ",");
str = str.replace(/^,/, "");
str = str.replace(/,$/, "");
if(i != 2)
banner = str.split(",");
delete alt[idx];
str = alt.join(",");
str = str.replace(/,,/, ",");
str = str.replace(/^,/, "");
str = str.replace(/,$/, "");
if(i != 2)
alt = str.split(",");
delete url[idx];
str = url.join(",");
str = str.replace(/,,/, ",");
str = str.replace(/^,/, "");
str = str.replace(/,$/, "");
if(i != 2)
url = str.split(",");
}
}
try
{
window.addEventListener("load", init, false);
}
catch(e)
{
window.attachEvent("onload", init);
}