- ベストアンサー
imgのsrcに値を設定するには
<img src="photo.jpg" title="" id="2" /> document.getElementById('2').setAttribute('title',代入値); のようにsrcのほうにも値を設定したいのですが、単純に document.getElementById('2').setAttribute('src',代入値); のようにしてもできませんでした。srcに値を設定するにはどうしたらよいでしょうか？
- shizer
- お礼率57% (22/38)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まず、数字だけのidをつけるのは、やめたほうがいいでしょう。（参考URL） さて、本題ですが、私のところでは document.getElementById('2').setAttribute('src','photo2.jpg'); のようにしたところ、上手くいきました… 文字列の前後に「''」をちゃんとつけていますか？ 参考までに、他に document.getElementById('2').src = 'photo2.jpg'; という、単純な方法もあります。
関連するQ&A
- FireFoxにプロパティ"src"は存在しない？
指定された画像要素の"SRC"属性を書き換えて、 以下のような画像を変更するプログラムを書いています。 function hoge(ImgName){ document.getElementById("Picture").src=ImgName; } （中略） <img src="" id="Picture" onClick="JavaScript:hoge(hoge.jpg)"> ＩＥでは実行可能なのですが、FireFoxで実行すると 「document.getElementById("Picture") has no properties」 というエラーが出てしまいます。 setAttributeなども試したのですが同様のエラーが出てだめでした。 やはり指定プロパティ(src)が存在しないので駄目みたいです。 FireFox等でIMG要素のSRC属性を書き換えるにはどうすれば 良いでしょうか。アドバイスをお願いします。
- 締切済み
- JavaScript
- <img src=http://にしたい
PHPでWebページのソースを取得して そのソースの中の<img>タグの src属性がもしhttp://で始まらなかった場合 取得したURLをsrc属性に加える方法はないでしょうか？ 例 URL=http://www.○○.com ソース <img src="/image/01.jpg"> ↓ <img src="http://www.○○.com/image/01.jpg"> に変更したいです。 よろしくお願いします。
- ベストアンサー
- PHP
- <img src"○.jpg">の○をランダムに！
1.jpgから30.jpgの30枚の画像はimagesという名のフォルダにあり、 それらの画像をJavaScriptで画像を1枚目からランダムにフェードインするものを作りたく、 http://asamuzak.jp/html/302を参考にして、 2枚目からランダムにフェードインすることはできました。 しかし、1枚目が必ず同じ画像が表示されてしまいます。 body内の<img src"1.jpg" id=""> の部分が表示される1枚目のようです。 1.jpgを2.jpgにすると2.jpgが最初に表示されます。 1枚目からランダムにフェードインするものを作るには、 この<img src"1.jpg" id="">を<img src"ランダムな整数.jpg" id=""> にすればいいのでは？ と思いました。 自分が考えたコードは、 下記コードの場合の動作は、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script language="JavaScript"> <!-- var n = Math.floor((Math.random() * 29))+1; //--> </script> </head> <body> <img src="../images/1.jpg" /> </body> </html> 1.jpgが毎回必ず表示されます。 ランダムな整数を取得できるJavaScriptを作り、 var n = Math.floor((Math.random() * 29))+1; その整数を上記コードの <body> <img src="../images/1.jpg" /> </body> の部分を <body> <img src="../images/n.jpg" /> </body> とvar nを入れてやれば 1～30のランダムな整数が入って ページを更新するたびに画像が変わると考えました。 <img src="../images/n.jpg" />の書き方を直せばいいと思うのですが、 どのようにしたらいいのでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- imgタグのsrcの指定
PHPおよびHtmlの構文にて、下記のsrcの指定は正しいのでしょうか？ 実はこれ、Freeのスクリプトのコードですが、出力をすると、imgのリンクがhttp://bestpartnerusa.com/images/default_photo.php?profile=4と出力されてしまい、写真の部分が×表示されてしまいます。なにか、お気づきの点がありましたら、ご教示をお願いします。 echo "<a href=\"index.php?page=view_profile&id=".$profile[ id ]."\"><img height=100 border=0 hspace=0 vspace=0 src='images/default_photo.php?profile=".$profile[ id ]."'></a>";
- ベストアンサー
- PHP
- javascript src書き換え
javascript 初心者なのですが、質問させてください。 クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。 どこが違間違っているのでしょうか。 /-------------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_1" onclick="conce(c_1)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_2" onclick="conce(c_2)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_3" onclick="conce(c_3)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_4" onclick="conce(c_4)" /></li> <li><img src="none_2.jpg" alt="" width="100px" height="100px" id="c_5"/></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_6" onclick="conce(c_5)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_7" onclick="conce(c_6)" /></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_8" onclick="conce(c_7)" /></li> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_9" onclick="conce(c_8)" /></li> </ul> </div> <script type="text/javascript"> function conce(aaa){ document.getElementById("aaa").src = "3.jpg"; } </script> </body> </html> /-----------------------------------------------------------------------/ よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptでの画像切り替えを複数セット
JavaScript初心者です。 サムネイルに画像を合わせると、IDの付いた画像2枚とテキストの3箇所が同時に入れ替える、 というものを以下の方法で作成しました。 <script> function swap(n) { var items = [ { Text:"テキスト１", ImageB:"b/sample1.jpg", ImageA:"a/sample1.jpg" }, { Text:"テキスト２", ImageB:"b/sample2.jpg", ImageA:"a/sample2.jpg" }, { Text:"テキスト３", ImageB:"b/sample3.jpg", ImageA:"a/sample3.jpg" }, ]; var o = document.getElementById("photo"); document.getElementById("Txt").innerHTML = items[n].Text; document.getElementById("PhotoB").src = items[n].ImageB; document.getElementById("PhotoA").src = items[n].ImageA; } </script> <div id="photo"> <img src="sample1.jpg" alt="" name="PhotoB" id="PhotoB"> <img src="sample2.jpg" alt="" name="PhotoA" id="PhotoA"> <div id="Txt" name="Txt">説明文１</div> </div> <a href="#" onmouseover="swap(0)"><img src="sample1.jpg" /></a> <a href="#" onmouseover="swap(1)"><img src="sample2.jpg" /></a> <a href="#" onmouseover="swap(2)"><img src="sample3.jpg" /></a> このセットを同一ページで複数作成したいのですが、 IDを変えたセットを作ってもうまく動かず、困っております。 知識不足で申し訳ありませんが、この場合、どのような方法でしたら 複数の画像切り替えを作れるのでしょうか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- 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
- setAttributeによる画像の差し替え
DOM Scriptingで、setAttributeによる画像の差し替えをしたいのですが、意図どおりに差し替えができるブラウザと、できないブラウザがあります。ブラウザのバージョンなど詳細はまだ確認しきれていないのですが、比較的新しいOSとブラウザで差し替えができない傾向があります。以下のようなかたちで行っているのですが、新しい環境だとsetAttributeが使えない、といったことがあるのでしょうか。 【HTML】 <img id="test" src="off.jpg" width="200" height="100" alt="test" /> 【JavaScript(DOM Scripting)】 var test = document.getElementById("test"); test.setAttribute("src","on.jpg");
- 締切済み
- 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
- IMGタグのsrcを同時に変更することができない
radioボタンを押すと画像をそれぞれ切り替えるものを作りたく、試してみたのですが思うように動きません。最後のiB.children[i].src = vvv[j] + ".jpg";が１つのIMGタグに対してしか効いていないせいのようです。複数のIMGタグのsrcも同時に変更していきたいのですがどのようにしたら良いのでしょうか。 <html xml:lang="ja" lang="ja"> <head> <title>radioボタンを押して3×3パターンの画像を切り替える</title> <script type="text/javascript"> function imgChange(evt){ var t = evt.target || evt.srcElement; if(t.nodeName != "INPUT") return; var inp = t.parentNode.getElementsByTagName("input"); var nnn = [], vvv = []; for(i=0; node=inp[i++];){ if(node.type == "radio" && node.checked) { nnn.push(node.name); vvv.push(node.value); } } var iB = document.getElementById('imgBOX'); var iBlen = iB.children.length; for(i=0; iBlen>i; i++){ //処理前のalert alert("before : src = "+iB.children[i].src); //IMGタグのsrc通りの結果に。 if(iB.children[i].tagName != "IMG") continue; for(j=0, node=nnn[j]; inp.length>j; j++){ if(iB.children[i].name == node){ iB.children[i].src = vvv[j] + ".jpg"; } break; } //処理後のalert alert("after : src = "+iB.children[i].src); //一番最初のIMGだけが変更され、残りは変更されず。 } } </script> </head> <body> <form action="#" onclick="imgChange(event);"> 画像Ａの切替⇒ <input type="radio" name="imgA" value="3" checked /> <input type="radio" name="imgA" value="4" /> <input type="radio" name="imgA" value="5" /> <br /> 画像Ｂの切替⇒ <input type="radio" name="imfB" value="6" checked /> <input type="radio" name="imfB" value="7" /> <input type="radio" name="imfB" value="8" /> <input type="radio" name="imfB" value="9" /> <input type="radio" name="imfB" value="10" /> <br /> 画像Ｃの切替⇒ <input type="radio" name="imgC" value="11" checked /> <input type="radio" name="imgC" value="12" /> </form> <p>----------------------------------</p> <div id="imgBOX"> 画像Ａは<img width="20" src="0.jpg" name="imgA" alt="画像Ａ" /> <br /> 画像Ｂは<img width="20" src="1.jpg" name="imfB" alt="画像Ｂ" /> <br /> 画像Ｃは<img width="20" src="2.jpg" name="imgC" alt="画像Ｃ" /> </div> </body> </html>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 document.getElementById('2').setAttribute('src','photo2.jpg'); のようにしてうまくいきました。ありがとうございました。