落書きノート

ふと自分が気になった事を書いてます

JavaScript 画像をスワップ、マウスオーバー処理等々

こんな感じです。

<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>例題3-3</title>
</head>
<body>
  <h1>画像が2段階で変化します。カーソルを載せてからクリックしてください。</h1>
  <img src="./hana.jpg" onmouseover="this.src='./neko.png'"
  onclick="this.src='./bakuhatsu.jpg'" onmouseout="this.src='./hana.jpg'">
  <p>画像は、適当に見繕いました。</p>
</body>
</html>

マウスオーバーすると画像が変わり、さらにそこでクリックすると画像が変わり、そこからカーソルを画像の外に移動させれば、元に戻ります。このようなウェブアプリを作ると楽しいと素直に思います。

20160216190325