クリックすると個別に画像を入れ替える(タイル状3×3枚)


■動作ブラウザ 【 IE:4.0  NN:6.0】
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × ○ - ○ ○ ○ × × × × ○ - × -
Macintosh × ○ ○ ○ - - × × × × ○ - - ○
UNIX - - - - - - × × × × ○ - - -
Dreamcast - - - - - - - - - - × × -

ポイント <img src="img/kabe.gif" onClick="this.src='img/1.jpg'">
説  明 クリックしたら個別に画像を入れ替えるには、それぞれのimgタグ内でonClickイベントを検知して、表示したい画像のURLをthis.srcプロパティに代入します。
サンプル <html> <head> <title>クリックすると個別に画像を入れ替える(タイル状3×3枚)</title> </head> <body> クリックすると画像を入れ替えます。<br> 画像のプレロードを行っていないので表示までに、<br> 若干時間がかかる事があります。<br> <br> <img src="img/kabe.gif" onClick="this.src='img/1.jpg'" ><img src="img/kabe.gif" onClick="this.src='img/2.jpg'" ><img src="img/kabe.gif" onClick="this.src='img/3.jpg'"><br> <img src="img/kabe.gif" onClick="this.src='img/4.jpg'" ><img src="img/kabe.gif" onClick="this.src='img/5.jpg'" ><img src="img/kabe.gif" onClick="this.src='img/6.jpg'"><br> <img src="img/kabe.gif" onClick="this.src='img/7.jpg'" ><img src="img/kabe.gif" onClick="this.src='img/8.jpg'" ><img src="img/kabe.gif" onClick="this.src='img/9.jpg'"><br> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA