JavaScriptで画像を変更する
質問が分かりずらいと思いますが、お願いします。
<body>内に↓が書かれています。
<script language="JavaScript">
<!--
function ChangePics() {
for(i = 0; i < 3; i++) document.images[i].src = "white.jpg";
}
// -->
</script>
<img src="black.jpg"><br>
<img src="black.jpg"><br>
<img src="black.jpg"><br>
<form>
<input type="button" value="画像一括変更" onclick="ChangePics()"></input>
</form>
------------------------------------------------------------
[画像一括変更]ボタンをクリックすると表示されていた3枚の「black.jpg」が「white.jpg」に切り替わります。
ですが、画像のsrcへのアクセスは「document.images[i].src」で 行っているため、
<img src="black.jpg"><br>
<img src="black.jpg"><br>
<img src="black.jpg"><br>
の上に他の画像がある場合はその画像が「white.jpg」に変更されてしまいます。
ですが、<img src="black.jpg" name = "pic1">のようにname属性を付けるのは処理が面倒になるので、避けたいです。
質問の意図は、「作ったJavaScriptのプログラムをブログに載せたいが、そのプログラムの上にほかの画像があるため、正常に動作しない。」ということです。