JavaScriptの記述について
- JavaScriptを使った画像切り替えのプログラムで、メイン画像がremoveされずに二回目にremoveされる問題が発生しています。
- ボタンをマウスオーバーするとメイン画像が切り替わる機能を実装していますが、一回のremoveChildでメイン画像がremoveできない問題が発生しています。
- 解決策として、removeChildを二回呼び出すことで問題は解決しますが、なぜ一回のremoveChildではメイン画像がremoveできないのか疑問です。
- ベストアンサー
javascriptの記述について
私は今javascriptを独学で勉強をしていて、勉強した範囲内で自分で作成してみようと思いjavascriptのプログラムを 書いています。 やりたいこととしては メイン画像があり、その下に三つボタンを作成し、 その三つのボタンのどれか一つにマウスを持っいくとメイン画像が切り替わるという javascriptを作成しています。 またその三つのボタンにはそれぞれメイン画像が切り替わるようにイベントをだしています。 html側 <body> <div id="image"> <img src="image/main-image.jpg" /> </div> <div id="bottonbox"> <div id="botton1"> <img src="image/staff01.png" /> </div> <div id="botton2"> <img src="image/staff01.png" /> </div> <div id="botton3"> <img src="image/staff01.png" /> </div> </body> javascript window.addEventListener('load',photo_change,false); function photo_change(event){ var elem = document.getElementById('botton1'); elem.addEventListener('mouseover',botton1,false); elem.document.getElementById('botton2'); elem.addEventListener('mouseover',botton2,false); elem.document.getElementById('botton3'); elem.addEventListener('mouseover',botton3,false); } function botton1(event){ var img_change = document.getElementById('image'); img_change.removeChild(img_change.firstChild); var img =document.createElement('img'); img.src = 'image/main-image2.png'; img_change.appendChild(img); } ※botton2,3はsrc=画像名だけが違うだけで、botton1関数と同じの為、省略します。 これを実行すると、もともとあるメイン画像がremoveされず、下に新しい画像が表示されてしまいます。 ブレークポイントをつけてトレースしたのですが、どうやらimg_change.removeChild(img_change.firstChild); でremoveされていないらしくなぜか二回目にremoveされます。 ですので、試しに function botton1(event){ var img_change = document.getElementById('image'); //removeChild二回やってみる img_change.removeChild(img_change.firstChild); img_change.removeChild(img_change.firstChild); var img =document.createElement('img'); img.src = 'image/main-image2.png'; img_change.appendChild(img); } こうするともともとあったメイン画像がremoveされ、botton1にマウスを載せた時に 表示させようとしていた画像がちゃんと表示されます。 ですが、なぜ一回のimg_change.removeChild(img_change.firstChild);では メイン画像をremoveできないのでしょうか。 どなたかわかる方おしえていただけますでしょうか。 また、どこが悪いのか、など解説も付け加えていただけると幸いです。
- tomo19860508
- お礼率56% (9/16)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
独学者のお仲間です。 ＞なぜ一回のimg_change.removeChild(img_change.firstChild);では ＞メイン画像をremoveできないのでしょうか div要素内の子要素はタグのある要素だけではなく、テキスト要素も子要素と見做されているからでしょう。 ご提示のソースではテキストらしきものは見えませんが、改行なども含めてテキストとされますので、firstChildがテキスト、secondChildが画像要素となっていると想像されます。 画像要素を指定してremoveすれば、ご期待の通りになるかと思いますが、この場合はdiv内を空にしてしまえばよいので、 while(img_change.firstChild) img_change.removeChild(img_change.firstchild); のような方法でも解決できるかと思います。 しかし、もう少し考えてみると、今回の場合は画像の表示内容を変えるのが目的なので、要素自体を入替えなくとも画像のsrc属性を書換えれば足りるのではないかと思います。 var img_change = document.getElementById('image'); var img = img_change.getElementsByTagName("img")[0]; img.src = "○○.jpg"; みたいなことで。 さらに考えてみると、ご提示のコードだとボタンが増減する毎にスクリプトを何箇所か書換えなければならなくなりますが、この次には、数の影響を受けにくいスクリプトの書き方を考えてみるのもよろしいかもしれません。 それによって、個別のidを減らせるでしょうし、コード全体も短くなる可能性もあります。表示対象のURIだけは数の影響を受けますが、配列で定義するとか非表示でHTMLに記載しておくとか…
その他の回答 (1)
- lupin-333333
- ベストアンサー率31% (294/933)
このような場合、どのブラウザで、どのバージョンで検証したのか記載しましょう。 そうでないと、正確な回答はえられません。 だいたいはＮｏ１さんが説明していただきましたが、クロスブラウザの問題かもしれません。回答者が意識していない場合もありますので（特に質問者さんは意識していないようで）、まずその辺の基本的情報を記載しましょう。 これらの問題は、単にDOM操作だけの問題でもないので・・・
関連するQ&A
- 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); }
- ベストアンサー
- JavaScript
- Javascriptで質問です。
度々すみません。以下のようにセレクトボックスを２段階、「年」「月」を選択後に画像を３つ出力するコードでほぼ出来上がっているのですが、初期に画像を出しておきたいので、表示としては 「年」「月」画像1（2023−1.jpg）、画像2（2023−1-2.jpg）、画像3（2023−1-3.jpg）が初期画面で出るようにしたいのです。 詳しい方がいらっしゃいましたら、教えていただければ嬉しいです。よろしくお願いいたします。 <form> <div class="pulldownset vegetable"> <select id="cate" class="subbox" > <option value="">年</option> <option value="ha">2023年</option> <option value="ne">2024年</option> </select> <select id="ha" class="subbox2"> <option value="">月</option> <option value="ha1">1月</option> <option value="ha2">2月</option> <option value="ha3">3月</option> </select> <select id="ne" class="subbox2"> <option value="">月を選択</option> <option value="ne1">1月</option> <option value="ne2">2月</option> <option value="ne3">3月</option> </select> </div> </form> <!-- 画像1 --> <div id="ha1" class="subbox3"><img src="2023−1.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3.jpg" width="130" height="37" alt=""/></div> <!-- 画像2 --> <div id="ha1" class="subbox3"><img src="2023−1-2.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-2.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1-2.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3-2.jpg" width="130" height="37" alt=""/></div> <!-- 画像3 --> <div id="ha1" class="subbox3"><img src="2023−1-3.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-3.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1-3.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3-3.jpg" width="130" height="37" alt=""/></div> <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll(".subbox2,.subbox3").forEach(x=>{ x.style.display ="none"; }); document.querySelector("#cate").addEventListener('change',e=>{ document.querySelectorAll(".subbox2").forEach(x=>{ x.value=""; x.style.display =x.getAttribute("id")===e.target.value?"inline":"none"; }); document.querySelectorAll(".subbox3").forEach(x=>{ x.style.display ="none"; }); }); document.querySelectorAll(".subbox2").forEach(x=>{ x.addEventListener('change',e=>{ document.querySelectorAll(".subbox3").forEach(y=>{ y.style.display =y.getAttribute("id")===e.target.value?"inline":"none"; }); }); }); }); </script> <script> window.addEventListener('DOMContentLoaded', ()=>{ // 追加 2023-04-21 11:05 //---------------------------------------------------------- const cate = document.getElementById("cate"); const ha = document.getElementById("ha"); const subbox3 = document.querySelectorAll(".subbox3"); ha.style.display =""; cate.options[0].selected = true; ha.options[0].selected = true; let v = cate.options[1].text+"-"+ ha.options[1].text; [...subbox3].forEach(function(elem){ if (elem.textContent==v){elem.style.display="block"} }); //---------------------------------------------------------- }); </script>
- ベストアンサー
- JavaScript
- Javascriptで質問です。
以前こちらで質問をして retorofan さんに追加のscriptを詳しく教えていただき、実際の表示もほぼうまくいったのですが、選択ごとに表示位置が変わってしまってうまくいきません。inlineの部分をblockにしてだいぶ良くなったのですが、それでもまだ一定位置に出てくれません。どこを修正すれば一定位置に画像を出せるのでしょうか？ <form> <div class="pulldownset vegetable"> <select id="cate" class="subbox" > <option value="">年</option> <option value="ha">2023年</option> <option value="ne">2024年</option> </select> <select id="ha" class="subbox2"> <option value="">月</option> <option value="ha1">1月</option> <option value="ha2">2月</option> <option value="ha3">3月</option> </select> <select id="ne" class="subbox2"> <option value="">月を選択</option> <option value="ne1">1月</option> <option value="ne2">2月</option> <option value="ne3">3月</option> </select> </div> </form> <!-- 画像1 --> <div id="ha1" class="subbox3"><img src="2023−1.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3.jpg" width="130" height="37" alt=""/></div> <!-- 画像2 --> <div id="ha1" class="subbox3"><img src="2023−1-2.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-2.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1-2.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3-2.jpg" width="130" height="37" alt=""/></div> <!-- 画像3 --> <div id="ha1" class="subbox3"><img src="2023−1-3.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-3.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1-3.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3-3.jpg" width="130" height="37" alt=""/></div> <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll(".subbox2,.subbox3").forEach(x=>{ x.style.display ="none"; }); document.querySelector("#cate").addEventListener('change',e=>{ document.querySelectorAll(".subbox2").forEach(x=>{ x.value=""; x.style.display =x.getAttribute("id")===e.target.value?"inline":"none"; }); document.querySelectorAll(".subbox3").forEach(x=>{ x.style.display ="none"; }); }); document.querySelectorAll(".subbox2").forEach(x=>{ x.addEventListener('change',e=>{ document.querySelectorAll(".subbox3").forEach(y=>{ y.style.display =y.getAttribute("id")===e.target.value?"inline":"none"; }); }); }); }); </script> <script> //------------------------------------------------------------------------------ // 初期画面の表示内容 //「年」「月」画像1（2023−1.jpg）、画像2（2023−1-2.jpg）、画像3（2023−1-3.jpg） //------------------------------------------------------------------------------ window.addEventListener('DOMContentLoaded', ()=>{ // 追加 2023-04-21 22:40 //---------------------------------------------------------- const cate = document.getElementById("cate"); const ha = document.getElementById("ha"); const subbox3 = document.querySelectorAll(".subbox3"); ha.style.display =""; cate.options[0].selected = true; ha.options[0].selected = true; [...subbox3].forEach(function(elem, index){ if (index % 6 == 0){ elem.style.display="inline-block"; //横並び //elem.style.display="block"; //縦並び } }); //---------------------------------------------------------- });
- ベストアンサー
- JavaScript
- クリックして画像を表示JavaScriptについて
友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。
- ベストアンサー
- JavaScript
- javascript について追加の質問
質問NO6591909＝3/14 10：59の追加の質問です。 素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね？ IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか？（function fx()を9つ別々に書くんでしょうか？・・・・・・）よろしくお願いいたします。 因みにここからhtml↓（さっきも書きましたが、また書いておきます。） <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>
- ベストアンサー
- 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で困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
- javascriptのcanvasについて
先日こちらで質問させて頂き、頂いた回答をもとに javascriptのcanvasについて勉強を続けていて、 canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。 先日教えて頂いた内容をもとに 下記のような記述で2枚目のcanvasの画像を入れ替えることや、 色を変更することは出来ました。 ただ、「進む」ボタンや「戻る」ボタンを押したときに 色がもとの色に戻ってしまうので、色は固定されたまま（この記述でいうと茶色や赤）で 画像を入れ替える方法がわからずにいます。 なにか良い方法はないでしょうか。 <style type="text/css"> .canvas001 { position: absolute; top:100px; left:0px; } .canvas002{ position: absolute; top:100px; left:0px; } </style> <script> onload = function() { image1(); image2(); image3();}; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "face.png"; }; function image2() { var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "hair1.png"; }; var src = [ 'hair1.png', 'hair2.png', 'hair3.png' ]; var currentIndex = 0; var currentImage; function hair(){ var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function(){ currentIndex = (currentIndex - 1 + src.length) % src.length; hair(); } window.foward = function(){ currentIndex = (currentIndex + 1) % src.length; hair(); } function black(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 35; idata[ i*4 + 1 ] = 24; idata[ i*4 + 2 ] = 21; } ctx.putImageData(imagedata,0,0); } function brown(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 140; idata[ i*4 + 1 ] = 96; idata[ i*4 + 2 ] = 37; } ctx.putImageData(imagedata,0,0); } function red(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 182 ; idata[ i*4 + 1 ] = 0; idata[ i*4 + 2 ] = 5; } ctx.putImageData(imagedata,0,0); } </script> <body> <div> <div class="canvas001"><canvas id="canvas1" height="300"></canvas></div> <div class="canvas002"><canvas id="canvas2" height="300"></canvas></div> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> <img src="btn_black.png" onclick="black()" > <img src="btn_brown.png" onclick="brown()" > <img src="btn_red.png" onclick="red()" > </body>
- ベストアンサー
- JavaScript
- IE11 javascriptについて
すみません、IE11なってから、以下のjavascriptが動かなくなりました。 画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。 全部のロジックを書いてしまいましたが、 何処がIE11から変更されたかが解らなくて、困っている所です。 何処を直すのか、全部聞くのもあつかましいと思いました、 どのあたりを見直しすれば宜しいですか。 教えて頂ければ幸いです。 <SCRIPT language="JavaScript"> <!-- var img = new Array(); img[0] = new Image(); img[0].src = "img/4031.jpg"; img[1] = new Image(); img[1].src = "img/4032.jpg"; img[2] = new Image(); img[2].src = "img/4031.jpg"; img[3] = new Image(); img[3].src = "img/4032.jpg"; img[4] = new Image(); img[4].src = "img/4031.jpg"; imgMaxSizeW = 171; imgMaxSizeH = 141; alphaTimer = 10; stopTimer = 2000; nextImgTimer = 1000; _dom=(document.all?3:(document.getElementById?1:(document.layers?2:0))); function getWindowSize() { if(_dom == 1 || _dom == 2) { win_width = self.innerWidth; win_height = self.innerHeight; } if (_dom == 3) { win_width = document.body.clientWidth; win_height = document.body.clientHeight; } } function showLayer(layerName){ if (_dom == 1) document.getElementById(layerName).style.visibility = "visible"; if (_dom == 2) document.layers[layerName].visibility = "show"; if (_dom == 3) document.all(layerName).style.visibility = "visible"; } function hideLayer(layerName){ if (_dom == 1) document.getElementById(layerName).style.visibility = "hidden"; if (_dom == 2) document.layers[layerName].visibility = "hide"; if (_dom == 3) document.all(layerName).style.visibility = "hidden"; } function writeHTML(layerName,html) { if (_dom == 1) { var div = document.getElementById(layerName); while(div.hasChildNodes()) div.removeChild(div.lastChild); var range=document.createRange(); range.selectNodeContents(div); range.collapse(true); var cf=range.createContextualFragment(html); div.appendChild(cf); } if (_dom == 2) { var div = document.layers[layerName]; div.document.open(); div.document.write(html); div.document.close(); } if (_dom == 3) document.all(layerName).innerHTML = html; } function moveLayerTo(layerName, x, y){ if (_dom == 1) { document.getElementById(layerName).style.left = x + scrollX; document.getElementById(layerName).style.top = y + scrollY; } if (_dom == 2) { document.layers[layerName].left = x + pageXOffset; document.layers[layerName].top = y + pageYOffset; } if (_dom == 3) { document.all(layerName).style.pixelLeft = x + document.body.scrollLeft document.all(layerName).style.pixelTop = y + document.body.scrollTop; } } function changeAlpha(layerName) { if (_dom == 3) { if (alphaCount < 200) { alphaCount += 2; op = alphaCount > 100 ? 100 - (alphaCount-100) : alphaCount; document.all(layerName).filters["alpha"].opacity = op; if (op == 100) { tim = setTimeout("changeAlpha('"+layerName+"')", stopTimer); } else { tim = setTimeout("changeAlpha('"+layerName+"')", alphaTimer); } } else { hideLayer(layerName); clearTimeout(tim); tim = setTimeout("setAlphaImgPos()",nextImgTimer); } } else { setTimeout("setAlphaImgPos()",nextImgTimer*2); } } var imgCount = 0; function setAlphaImgPos() { writeHTML("imgLay",'<IMG src="' + img[imgCount].src + '" border="0">'); imgCount++; if (imgCount >= img.length) imgCount = 0; getWindowSize(); sX = Math.floor(Math.random()*(win_width-imgMaxSizeW-10)); sY = Math.floor(Math.random()*(win_height-imgMaxSizeH-10)); moveLayerTo("imgLay",sX,sY); showLayer("imgLay"); alphaCount = 0; changeAlpha("imgLay"); } window.onload = setAlphaImgPos; // --> </SCRIPT>
- ベストアンサー
- JavaScript
- 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
お礼
すみませんそうですよねブラウザによってちがいますものね。。 今後質問する際はそこも記載して行こうと思います。 ありがとうございました。