- ベストアンサー
JavaScriptで画像を変更する方法
- JavaScriptのプログラムを使って画像を一括変更する方法を紹介します。
- document.images[i].srcを使用することで、画像のsrc属性を変更できます。
- 他の画像がある場合でも、name属性を付けずに効率的に画像を変更する方法を解説します。
- newtgecko
- お礼率88% (150/169)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
何の目印もなしに順番だけで指定するならご質問のようになります。 対象とする画像の位置が変わっても良いようにしたければ、何かで識別できることが必要になります。 No.1の捕捉に書かれているように、対象とする画像をタグで囲ってもよいのなら、そのタグにidをつけておいて… var images=document.getElementById("対象のid").getElementsByTagName("img"); で、タグ内にある画像要素が取得できるますので、あとは同様に処理してあげればよろしいかと。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
番号で指定すれば良いと思います。 // ２番目の<img>だけを変更 document.images[2].src = "white.jpg"; // 5番目から7番目の<img>を変更 for(i = 5; i < 8; i++) document.images[i].src = "white.jpg";
補足
うまく質問できていないようです。申し訳ありません。 プログラムの記述内で、決まった数の画像を表示します。その画像はプログラムを実行することで、違う画像に変更されたりします。このプログラムをそのまま、ブログに載せると、元々ある画像がこのプログラムによって操作されてしまいます。その原因は document.images[0].src = "white.jpg"; のように要素でアクセスしているからです。この場合ブログに最初に出てくる画像が変更されます。 できるかどうか分かりませんが、プログラムで操作したい画像たちを何らかのタグで囲い、ちょうど<form name="myForm">のなかにある<input name="myText">に document.myForm.myText.valueという風な感じで、 画像も、 document.何らかのプロパティ.images[i].srcのようにアクセスできたらいいなと考えています。 したいことが、上手く日本語で説明することができせん。できなさそうなら、iframeでリンクして表示します。
お礼
ありがとうございます！ 求めていた答えをありがとうございます！上手く実行することができました。