DOM 属性の取得
下記は画像などのスライドのスクリプトです。
スライドの後のほう、つまり順番の最後にあたる9番目で http://www.trape3.com/ban.htmlへのリンクを貼っています。
そのリンクを外した上で、 <img>を入れなおしています。
つまり、
1) <img src="image02/ani001.jpg" name="anime"> へのリンクを貼る。 →その結果このようになる。
<a href="http://www.trape3.com/ban.html"><img src="image02/ani001.jpg" name="anime"></a>
2) その次に 上記の全体をremoveする。
3) その上で、<img src="image02/ani001.jpg" name="anime"> を置きなおす。
という操作をしていますが、そこで問題。
この最後の9場面が終了して、ふたたび一番目に戻って、そこでスライドが止まってしまいます。
理由は、
1) name="anime" を取得できない。
2) あるいは、 name="anime" が存在していない。
どちらかだと思われます。
というのは、
document.anime.src の代わりに document.getElementById('bb01').firstChild.src
とすると、動きが止まらないで継続していくからです。
ということで、 name="anime" はどうなってしまったのか。
この部分の操作に関するスクリプトは 次のとおりです。
imageTag=document.createElement('img');
imageTag.setAttribute('name','anime');
imageTag.setAttribute('src','image02/ani001.jpg');
document.getElementById("bb01").appendChild(imageTag);
imgエレメントを作成し、そこに 属性としてのname="anime"を置くということですね。
本に書かれてあるとおりです。(笑
この置いたはずの name="anime" が効いていない、どうしてなのかという質問です。
よろしくお願いします。
-------------------------------------------
スクリプト
■htmlファイル
<body onload="timerID=setTimeout('change()',5000)">
<div style="position: absolute; top: 220px; left:80px" id="bb01"><img src="image02/ani001.jpg" name="anime" alt="アニメ"></div>
■jsファイル
image1=new Image();
image1.src="image02/ani001.jpg";
image2=new Image();
image2.src="image02/ani002.jpg";
image3=new Image();
image3.src="image02/ani003.jpg";
image4=new Image();
image4.src="image02/ani004.jpg";
image5=new Image();
image5.src="image02/ani005.jpg";
image6=new Image();
image6.src="image02/ani006.jpg";
image7=new Image();
image7.src="image02/ani007.jpg";
image8=new Image();
image8.src="image02/ani008.jpg";
image9=new Image();
image9.src="image02/150.jpg";
function change()
{
clearTimeout(timerID);
if(document.anime.src==image1.src)
document.anime.src=image2.src;
else if(document.anime.src==image2.src)
document.anime.src=image3.src;
else if(document.anime.src==image3.src)
document.anime.src=image4.src;
else if(document.anime.src==image4.src)
document.anime.src=image5.src;
else if(document.anime.src==image5.src)
document.anime.src=image6.src;
else if(document.anime.src==image6.src)
document.anime.src=image7.src;
else if(document.anime.src==image7.src)
document.anime.src=image8.src;
else if(document.anime.src==image8.src) {
document.getElementById('bb01').removeChild(document.getElementById('bb01').firstChild);
document.getElementById("bb01").innerHTML = "<a href=\"http://www.trape3.com/ban.html\">" + "<img src=" + "\"" + image9.src + "\"" + "width=\"100px\"" + "name=\"anime\"" + "\">" + "</a>";
}
else {
document.getElementById('bb01').removeChild(document.getElementById('bb01').firstChild);
imageTag=document.createElement('img');
imageTag.setAttribute('name','anime');
imageTag.setAttribute('src','image02/ani001.jpg');
document.getElementById("bb01").appendChild(imageTag);
}
timerID=setTimeout("change()",5000);
}
お礼
ご返答、ありがとうございます。 セールのところまで見つけていただいて。。 かなり安い！！ 早速注文してみました！