クリックした画像を入れ替える場合、thisキーワードが便利です。
ボタンにする
//ボタンにするスクリプト function setevent03(){ var elmev03 = document.getElementById("ev03"); var imgs = elmev03.getElementsByTagName("img"); for (var i=0;imgs.length>i;i++){ imgs[i].setAttribute("onclick","changeimg(this)"); } } //画像を入れ替えるスクリプト function changeimg(koko){ koko.src="images/red.png"; }
全部のボタンにonclick=changeimg(this)と同じことを書いておくだけです。
クリックされるとこのthisの部分にクリックされた位置の情報が入ってchangeimg()に行きます。
changeimg()ではそれをkokoという変数で受け、koko.srcでクリックされた要素の画像を指定できるのです。
使わなくてもできないことはありませんが、長くなったり分かりにくくなったりします。
上と同じことをthisキーワードを使わないでやろうとすると、次の様になります。
ボタンにする
//ボタンにするスクリプト function setevent04(){ var elmev04 = document.getElementById("ev04"); var imgs = elmev04.getElementsByTagName("img"); for (var i=0;imgs.length>i;i++){ imgs[i].setAttribute("onclick","changeimg(" + i + ")"); } } //画像を入れ替えるスクリプト function changeimg(number){ var elmev04 = document.getElementById("ev04"); var imgs = elmev04.getElementsByTagName("img"); imgs[number].src="images/red.png"; }
setevent04()では、imgタグに onclick=changeimg(0), onclick=changeimg(1),...という属性を書き加えます。
function changeimg(number) のnumberで渡される値を数値として取扱い、imgタグの number番目であるimgs[number]のsrcを書き換えています。