| ポイント |
<![CDATA[
<img src="img/kabe.gif" onClick="this.src='img/1.jpg'">
]]>
|
| 説 明 |
クリックしたら個別に画像を入れ替えるには、それぞれのimgタグ内でonClickイベントを検知して、表示したい画像のURLをthis.srcプロパティに代入します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>クリックすると個別に画像を入れ替える（タイル状３×３枚）</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!
|
クリックすると個別に画像を入れ替える（タイル状３×３枚）