| ポイント |
<![CDATA[
<img src="image1.gif" border="0" onMousedown="this.src='image2.gif'" onMouseup="this.src='image1.gif'">
]]>
|
| 説 明 |
マウスボタンを押すと画像が入れ替わり離すと元に戻るようにするにはonMousedownイベントとonMouseupイベントを使います。onMousedownイベントで画像自身の画像URLを示すthis.srcに押された時の画像URLを指定します。onMouseupイベントの場合も同様に画像URLを示すthis.srcに離された時の画像URLを指定します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>マウスボタンを押すと画像が入れ替わり離すと元に戻る</title>
</head>
<body>
<img src="image1.gif" border="0" onMousedown="this.src='image2.gif'" onMouseup="this.src='image1.gif'"><br>
</body>
</html>
]]>
|
| 補足説明 |
このサンプルではプレロード処理を行っていないので最初にボタンが押された時に画像を読み込むため表示までに時間がかかることがあります。実際に使用する場合は画像のプレロードを行うようにしてください。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
マウスボタンを押すと画像が入れ替わり離すと元に戻る