初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

Javascript 画像置換 マウスオーバー・マウスアウト

Javascriptで簡単に画像置換をする方法を記述します。

モノクロ画像の上にマウスを乗せるとカラー画像にする方法になります。
写真加工・Javascriptを分けて記載していきます。

写真をトリミングする。モノクロ画像にする

  1. まず何でも良いので画像の素材を用意します。オススメ写真素材サイト morguefile
  2. 表示する写真のサイズを決めます。※今回は400px×300pxで加工します。
  3. Photoshopで用意した素材を開き、切り抜きツールを選択します。
  4. 画像サイズの400px × 300px を指定します。

    f:id:bellsmarket:20150201231926p:plain

  5. 切り取りたい場所をドラッグ&ドロップで指定し切り取ります。
  6. メニューの【ファイル】→【Web用に保存】から好きな拡張子で任意のフォルダに保存します。
  7. モノクロ画像も用意が必要なのでメニューの【イメージ】→【色調補正】→【白黒】を選択しそのままOK を押します。

    f:id:bellsmarket:20150201232001p:plain

  8. 手順6と同様にモノクロ写真も保存します。

※今回用意した画像はそれぞれ、
モノクロ画像:mono01.jpg
カラー画像:color01.jpg
と名前をつけました。

保存した場所ですがhtmlファイルと同一ディレクトリ内の imgフォルダに保存しました。

Javascriptで画像置換を行う

    1. htmlでbody要素内にモノクロ画像を表示する記述をします。

<body>
<p><img src="img/mono01.jpg" alt="風景写真01"></p>
</body>
</html>

  1. 通常の画像表示は手順2まででOKですが画像置換する為のイベント属性を追記します。

<body>
<img src="img/mono01.jpg" alt="風景画01" onmouseover="this.src='img/color01.jpg'" onmouseout="this.src='img/mono01.jpg'">
</body>
</html>

onmouseout属性を記述:マウスが画像の上から外れた時にモノクロ写真が表示するようになります。
f:id:bellsmarket:20150201195813p:plain

onmouseover属性を記述:マウスが画像の上に乗った時にカラー画像を表示するようになります。

f:id:bellsmarket:20150201195810p:plain

以上で画像置換の記述が終わります。とても簡単に下記のような画像置換が出来ます。

topへ戻る