DOM属性の取得
- DOM属性の取得に関するスクリプトでは、最後の9番目の場面でスライドが止まってしまう問題が発生しています。
- 問題の原因はname="anime"が正しく取得できていないか存在していないことです。
- 必要な属性であるname="anime"が効いていない原因について質問しています。
- ベストアンサー
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); }
- tonbeisan
- お礼率45% (28/62)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ああ、なるほど。問題がわかりました。 IEはname属性のセットに問題があるようです。 document.getElementById('bb01').innerHTML = '<img name="anime" width="100px" src="'+image1.src+'" />'; これでパスしますね。 DOMで生成したinput要素のname属性がセットされない - 宇宙野武士は元気にしているか http://d.hatena.ne.jp/daisun/20080726/1217070387 一応、cloneNodeで既存ノードをコピーする手法も使えるようです。(name属性ごとコピーできる) ---- function change(){ var anime = document.getElementsByName("anime")[0]; if(i < img.length){ i++; } else { i=0; } anime.src=img[i]; if(i == img.length-1){ var a = document.createElement('a'); a.id = 'AnimeLink'; a.href = 'http://www.trape3.com/ban.html'; a.appendChild(anime.cloneNode(true)); anime.parentNode.replaceChild(a,anime); } else if(i == 0){ var link = document.getElementById('AnimeLink'); link.parentNode.replaceChild(anime.cloneNode(true),link); } } ---- name="anime" が振られると自動的に id="anime" がDOMツリーに表示されるIEの仕様もちょっと気になりますね。 (DOM情報は「IE Developer Toolbar」で確認できます。) ** nameからIDへ ** 今回の場合name属性よりはid属性の方が適切だと思います。 IEは document.anime なんて書き方が出来るようですが、name=anime は同一HTML内に複数持てるのでこの書き方は怪しい。 DOM記法では document.getElementsByName("anime")[0]; と書く必要があります。 IDなら同一HTMLに一つしか持てないので、document.getElementById('Anime'); で良く、一つしかない画像を切り替えるのであればIDを指定した方が効率がいいです。 ** IEの独自記法は使わない方がいいかも ** いろんなところでIEの独自記法が使われていますが、DOM標準の記法に直した方が問題は少ないと思います。 IE7→IE8と進化する過程でWeb標準に合わせる方向で進化しています。 MSは後方互換性には非常に気を遣っているので動かなくなることはないと思いますが、ブラウザの多様性が問われている現在では Firefox、Operaに対応させない理由は少ないと思います。
その他の回答 (2)
- think49
- ベストアンサー率59% (285/482)
#1です。 #1のコードはHTMLが欠けていたので、補足します。 ---- <head> <script type='text/javascript'> (function(){ ... })(); </script> </head> <body> <div style="position: absolute; top: 220px; left:80px" id="bb01"><img id="Anime" src="image02/ani001.jpg" alt="アニメ"></div> </body>
- think49
- ベストアンサー率59% (285/482)
質問者さんのコードをそのままHTMLにして、Firefox3でテストしたら期待通りに動作している、ように見えます。 スライドは止まらず、ループして画像が変わり続けます。ブラウザによって変わるのかな？ とりあえず、コードを短く書き換えてみました。下記コードではどうなるでしょうか？ ------ (function(){ var img = ["image02/ani001.jpg","image02/ani002.jpg","image02/ani003.jpg","image02/ani004.jpg","image02/ani005.jpg","image02/ani006.jpg","image02/ani007.jpg","image02/ani008.jpg","image02/150.jpg"]; var i = 0; function change(){ var anime = document.getElementById('Anime'); if(i < img.length){ i++; } else { i=0; } anime.src=img[i]; if(i == img.length-1){ var a = document.createElement('a'); a.id = 'AnimeLink'; a.href = 'http://www.trape3.com/ban.html'; a.appendChild(anime.cloneNode(true)); anime.parentNode.replaceChild(a,anime); } else if(i == 0){ var link = document.getElementById('AnimeLink'); link.parentNode.replaceChild(anime.cloneNode(true),link); } } function init(){ var timerID = setInterval(change,1000); } if(typeof window.addEventListener == 'function'){ window.addEventListener('load', init, false); } else if(typeof window.attachEvent == 'object'){ window.attachEvent('onload', init); } })();
お礼
非常に丁寧なご解答 ありがとうございます。 たしかに、nameを idに変えるとスライドがうまくいきますね。 id="anime" ですね。 では、それでは何故 name属性を取らないのかという問題が残りますね。不思議ですね。というのは、初めはname属性を取っていて、一回それを削除して、再び置きなおしたら、取らなくなった。うーん、なんでかな。よくわからない。 それと、width="100px\" 属性を、hrefのリンクを貼るときに同時に設定していて、その後で そのwidth属性を削除removeしているんですが、にもかかわらず それがずっと効いている。 これは何を意味するのか。 ということは、 削除されていないということですよね。 ということは、removeによって 属性が削除されていないということなのか。
関連するQ&A
- 携帯でGIFアニメーションが正しく表示されません
携帯でGIFアニメーションを実現したいのですが、パソコンのブラウザで確認した場合問題なく動作するのですが、携帯のブラウザで確認した場合にGIFのイメージが「logo1.gif」から次のイメージに再表示されません。 携帯のキャリアはドコモで試しています。 以下にプログラムを貼り付けます。 間違っている点がありましたらご教授願います。 ---------------------------- ソース ---------------------------- <html> <head> <title>アニメーション/JavaScript</title> <script type="text/javascript"> <!-- var image1=new Image(); image1.src="image/logo1.gif"; var image2=new Image(); image2.src="image/logo2.gif"; var image3=new Image(); image3.src="image/logo3.gif"; var timerID; 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 document.anime.src=image1.src; timerID=setTimeout("change()",500); } //--> </script> </head> <body onLoad="timerID=setTimeout('change()',500)"> <img src="image/logo1.gif" name="anime" width="50" height="50" alt="アニメ"> </body> </html> ---------------------------- ソース ----------------------------
- 締切済み
- JavaScript
- 途中から動かないのですが・・・
以下の流れは、途中まで動くのですが /banner/k9-9-5.PNGから/banner/k9-6-5.PNGへの繰り返し表示がされません。どこが悪いのでしょうか？ image1=new Image(); image1.src="/banner/k1.PNG"; ↓↓↓２から６１は動きます↓↓↓ ・・・ここは省略します image62=new Image(); image62.src="/banner/k9-6-5.PNG"; image63=new Image(); image63.src="/banner/k9-9-5.PNG"; function imgchange(){ clearTimeout(timerID); if(document.fm.anime.src==image1.src) document.fm.anime.src=image2.src; else if(document.fm.anime.src==image2.src) ↓↓↓３から６２は動きます↓↓↓ ・・・ここは省略します document.fm.anime.src=image63.src; else if(document.fm.anime.src==image63.src) document.fm.anime.src=image1.src; timerID=setTimeout("imgchange()",200); } //リンク先を変更 function mnuopen() { //リンク先退避用 var wurl; //バナーの画像パスで リンク先判定 if(document.fm.anime.src==image1.src) wurl="http://www.*******.com/"; else if(document.fm.anime.src==image2.src) wurl="http://www.*******.com/"; ↓↓↓３から６２は動きます↓↓↓ ・・・ここは省略します else if(document.fm.anime.src==image63.src) wurl="http://www.*******.com/"; else wurl="http://www.*******.com/"; win=window.open(wurl,"wname"); }
- ベストアンサー
- JavaScript
- javascriptのカルーセル
配列に入れたイラストとそのタイトルを「次へ」「戻る」ボタンで順次両方向に表示したいのです。画像をボタンで前後に移動するところまではできたのですが、画像に対応する表題をどうやって表示したらいいのかどなたか教えていただけないでしょうか。やはりテーブルを利用しないとだめでしょうか。そうすると今度は画像をどうやって配列からテーブルに呼び出していいかわかりません。表題ですので画像と表題を配列に入れて同じカウンタで呼び出せればと思っています。以下現在のコードです。よろしくお願いします。 <html> <head> <title>バックナンバー</title> </head> <body> <center> <table width="550"><tr><td><td> <script type="text/javascript"> <!-- //画像を格納する配列の作成 var IMG = new Array(); IMG[0]=new Image(); IMG[0].src="chatsune/chatsune18.JPG"; IMG[1]=new Image(); IMG[1].src="chatsune/chatsune19.JPG"; IMG[2]=new Image(); IMG[2].src="chatsune/chatsune20.JPG"; IMG[3]=new Image(); IMG[3].src="chatsune/chatsune21.JPG"; IMG[4]=new Image(); IMG[4].src="chatsune/chatsune22.JPG"; IMG[5]=new Image(); IMG[5].src="chatsune/chatsune23.JPG"; IMG[6]=new Image(); IMG[6].src="chatsune/chatsune24.JPG"; IMG[7]=new Image(); IMG[7].src="chatsune/chatsune25.JPG"; var cnt=0; function Forward() { if(document.getElementById) { if(cnt >= IMG.length-1) { cnt = IMG.length-1; } else{ cnt++; document.getElementById("sd").src = IMG[cnt].src; //一つ画像を表示したらカウント用変数cntの値を＋１にする } } } function Back() { if(document.getElementById) { if(cnt <= 0) { cnt = 0; } else { cnt--; document.getElementById("sd").src = IMG[cnt].src; } } } </script> <img src="chatsune/chatsune18.JPG" id="sd" width="500" height="480" alt=""> <br> </td></td></tr> <tr><td align="left"> <form name="slide"> <input type="button" value="戻る" onclick="Back()"></td> <td align="right"> <input type="button" value="次へ" onclick="Forward()"></td></tr> <tr><td></td><td align="right"> <a href="list.html">バックナンバーのリストへ戻る</a></td></tr> </table> </form> </body> </center> </html>
- ベストアンサー
- JavaScript
- imgのsrcに値を設定するには
<img src="photo.jpg" title="" id="2" /> document.getElementById('2').setAttribute('title',代入値); のようにsrcのほうにも値を設定したいのですが、単純に document.getElementById('2').setAttribute('src',代入値); のようにしてもできませんでした。srcに値を設定するにはどうしたらよいでしょうか？
- ベストアンサー
- JavaScript
- 画像の大きさ
文字の横にちょっとした目印に1文字の大きさ程度の画像を表示させたいのですが、IEで文字のサイズを変更すると文字と画像がアンバランスになってしまいます。 文字の大きさを固定したくないと思っています。 単純に考えて、下のようなことができればと思っていますが、無理だと思っています。（???が埋まれば出来そうですが・・・） 参考になるサイトなどがありましたら教えてください。 <body> <img id="img" src="abc.gif" width="15" height="15" border="0" style="float:left;"><span>aaaaa</span> </body> <script> a = new Array("0.8","1.0","1.2"); if(??? == ???){i = 0;} else if(??? == ???){i = 1;} else if(??? == ???){i = 2;} document.getElementById("img").setAttribute('width',15*a[i]); document.getElementById("img").setAttribute('height',15*a[i]); </script>
- ベストアンサー
- JavaScript
- javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒 … と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ var ch = document.getElementById("changeImg"); ch.src=img[num].src; if(num<4){ num++; }else{ num=0; } setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 関数の重複で動かない？
ブログのサイドバーにjavascriptを使ってるのですが同じものを2個貼り付けたら古い方が動かなくなってしまいました。 関数の重複かも、というとところまではなんとなくわかったのですがどこをどうすれば動くようになるでしょうか？ ---------------------------------------- <HTML> <HEAD> <TITLE>TAG index Webサイト</TITLE> <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "image/start.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/newyork.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/london.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/yokohama.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </SCRIPT> </HEAD> <BODY> <IMG SRC="image/start.jpg" ALT="START" WIDTH="150" HEIGHT="100" NAME="def"> <BR> <A HREF="change3.html" onMouseOver="On('img1')" onMouseOut="Off()">NEW YORK</A> ｜ <A HREF="change3.html" onMouseOver="On('img2')" onMouseOut="Off()">LONDON</A> ｜ <A HREF="change3.html" onMouseOver="On('img3')" onMouseOut="Off()">YOKOHAMA</A> </BODY> </HTML> ----------------------------------------------
- 締切済み
- JavaScript
- JAVASCRIPTの接続子について
始めまして、JAVASCRIPPTで以下の様なコードを書いているのですが 'img' + page;の部分でエラーになってしまいます。どなたか正しい書き方を御享受下さい。 //画像を最初にキャッシュする var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); var img4 = new Image(); var page = 0; img0 = "image/ginotitle.JPG"; img1 = "image/Gino1page.JPG"; img2 = "image/Gino2page.JPG"; img3 = "image/Gino3page.JPG"; function moverts(){ switch(window.event.button) { case 1://************** 左クリック ********************************************* page = page - 1 ; //指定された画像を変更する document.getElementById("pic").src = 'img' + page; //id名「pic」の画像ソースをobjの画像ソースに書き換える document.getElementById("pic").src = 'img' + page; break; case 2://************** 右クリック ********************************************* page = page + 1 ; alert( = sns ); //指定された画像を変更する document.getElementById("pic").src = 'img' + page; //id名「pic」の画像ソースをobjの画像ソースに書き換える document.getElementById("pic").src = 'img' + page; break; } }
- 締切済み
- その他([技術者向] コンピューター)
- JavaScriptに関する簡単な質問です。
<script> var image1=new Image(); image1.src = "image/ny.jpg"; var image2=new Image(); image2.src = "image/tokyo.jpg"; var i = 1; function change(){ if(i==1){ element.src=image2.src; i=2; }else{ element.src=image1.src; i=1; } } </script> <img id="photo" src="image/ny.jpg" /> <script> var element = document.getElementByid("photo"); element.onclick=change; </scropt> オンクリックで画像が切り替わるというスクリプトなのですが、 new Image() というのは new date() と言うのと関係しているのでしょうか。 var i=1 と言うあたりからよくわからなくなってしまいます。 最後のelement.onclick=change;と言うのもよくわかりません。 スクリプトを平易な日本語で、簡単に説明してもらえるとありがたいです。 よろしくお願いします。
- 締切済み
- JavaScript
- JavaScriptアニメーションについて質問！！
学校の授業の入門編でやったことです だから初心者です 使用ソフトはEmEditot, Internet Explorerです。 ペイントを使い 01.gifから順番に06まで絵をかきました そしてz:\local\100のフォルダに保存 z:\local\100 フォルダ内で 右クリック → [新規作成] → [テキストドキュメント] ファイル名を 100.html とする(注意が表示されるが実行する) 100.html を EmEditorで開く (アイコン上で 右クリック→[送る]→[EmEditor]) 以下のHTML文書を入力する（HTML文書をドラッグしてEmEditorに貼り付けてよい） xx, yy は作成した画像の幅と高さ, nnは画像枚数である それぞれを置き換えること gif形式(.gif)の画像として記述しているので他の形式の場合は拡張子を書き換えること <html> <head> <title>GIFアニメーション</title> <script language="JavaScript"> <!-- var num = nn; var ani = new Array(); for (var i=1;i<=num;i++){ if(i<10){ ani[i]=new Image(); ani[i].src="0" + i + ".gif"; } else { ani[i]=new Image(); ani[i].src="" + i + ".gif"; } } var i=1; function start(){ document.pic.src=ani[i].src; i++;if(i>num)i=1; setTimeout("start()",200); } // --> </script> </head> <body onload="start()"> <img name="pic" src="01.gif" width="xx" height="yy" /> </body> </html> という説明文があり <html> <head> <title>GIFアニメーション</title> <script language="JavaScript"> <!-- var num = 06; var ani = new Array(); for (var i=1;i<=num;i++){ if(i<10){ ani[i]=new Image(); ani[i].src="0" + i + ".gif"; } else { ani[i]=new Image(); ani[i].src="" + i + ".gif"; } } var i=1; function start(){ document.pic.src=ani[i].src; i++;if(i>num)i=1; setTimeout("start()",200); } // --> </script> </head> <body onload="start()"> <img name="pic" src="01.gif" width="128" height="128" /> </body> </html> まで書いたのですが 1枚しかネット上には表示されず アニメーションになりませんでした。 どうすれば コマ送りみたいなアニメーションになりますか 書き方を教えてください
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
大変丁寧な再解答 ありがとうございます。そうですか、IEの バグが原因なんですか。 これからは、idで対応します。 おかげさまで、これでほぼ問題は解決しました。「ほぼ」というのは、 スライドが一回転して、 その後で 途中で それらのの画像の一部のサイズが変化してしまうと言うことがあるからです。 設定した widthがremoveしたにもかかわらず それが効いているのかなと思っていましたが、 widthを初めから外しておいても 同じ現象が起きました。 removeして再設定というのは、どうもいろいろと問題がありのようです。属性nameの件も、removeして再設定というところで起きている問題ですから、 どうも removeして再設定したところで なにかIEのバグが起きてくるのでしょうかね。