JavaScript

初心者向け:this.src活用で実現する画像のマウスオーバー切替テクニック

  /

ウェブ開発の世界において、ユーザーの体験を向上させるための技術は日々進化しています。
今回は、ウェブサイトにおいてユーザーのインタラクションを引き出す簡単かつ効果的な方法、画像のマウスオーバー効果を実装する方法をご紹介します。
特に、JavaScriptのthis.src属性を用いる方法に焦点を当て、そのシンプルさと便利さを解説します。

this.srcを使って簡単にマウスオーバーで2枚の画像を切り替える方法です。

Contents

imgタグのonmouseover／onmouseoutにthis.srcを記述する方法

ウェブページ上で画像にマウスを合わせたとき（マウスオーバー）、別の画像に切り替えることができます。これを実現するには、imgタグのonmouseoverとonmouseoutイベントにJavaScriptコードを記述します。具体的には、this.src属性を使ってマウスオーバー時とマウスが離れた時（マウスアウト）に表示する画像を指定します。

例えば、次のように記述することで、マウスオーバー時にlogo_on.jpgに、マウスアウト時にはlogo.jpgに画像が切り替わります。

    <a href="/" title="DAD UNION" target="_blank">
    <img src="logo.jpg" width="250" height="250" alt="DAD UNION" border="0" onmouseover="this.src='logo_on.jpg';" onmouseout="this.src='logo.jpg'">
    </a>

　
切替り前（logo.jpg）と切替り後（logo_on.jpg）の画像を2枚用意し、this.src=’画像’でマウスオーバー／アウト時の画像を切替えてます。imgタグにマウスオーバー時（onmouseover=”this.src=’logo_on.jpg’;”）とマウスアウト時（onmouseout=”this.src=’logo.jpg'”）に画像を切り替える処理を記述します。

この方法は、特に複雑なJavaScriptや追加のライブラリを必要とせずに、直感的に画像の切り替えが可能です。

CSSでマウスオーバー時に画像を薄くする方法

CSSを利用することで、マウスオーバー時に画像を透過させるなど、より洗練された効果を加えることができます。以下にCSSを使って画像を50％透過させる方法を紹介します。

CSSでは、opacity属性を使用して画像の透過度を制御します。マウスオーバー時に透過効果を加えたい場合、a:hover imgセレクタを用いて、リンクにマウスが乗った時のimgタグの透過度を指定します。

<style type="text/css">
<!--
#idBtn a:hover img{
	opacity:0.5;
	-moz-opacity:0.5;
	filter:alpha(opacity = 50);
}
-->
</style>

　
htmlの記述は以下の通りです。aタグの中にマウスオーバー時に透過させるimgタグを用意してます。

<div id="idBtn" align="center">
    <a href="/" title="DAD UNION" target="_blank">
    <img src="logo_on.jpg" alt="DAD UNION" width="250" height="250" border="0">
    </a>
</div>

　
この方法を用いれば、ユーザーがリンク上にマウスを置いた際に、画像が半透明になり、視覚的に魅力的なインタラクションを提供できます。

マウスオーバー時の画像切替演出を簡単に実現するデモページ

理論だけでなく、実際にこれらの技術を体験してみることが重要です。以下のリンクでは、マウスオーバー時の画像切り替えや透過効果を簡単に実現するデモをご覧いただけます。
マウスオーバー時の画像切替演出を簡単に実現するデモ

このデモを通じて、実際に手を動かしながら、どのようにウェブページがユーザーのインタラクションに応答するかを学ぶことができます。

まとめ

この記事では、this.srcを使用した画像のマウスオーバー効果の実装方法について解説しました。JavaScriptとCSSを駆使することで、ウェブページにダイナミックなインタラクションを加え、ユーザー体験を豊かにすることができます。エンジニアやウェブ開発に興味のある初心者にとって、これらの技術はウェブサイトをより魅力的にするための重要なスキルとなります。

ウェブ開発は、常に新しい技術の学びが求められる分野です。今回ご紹介した技術を起点に、さらに多くの技術を探求し、あなたのウェブサイトをよりユニークでユーザーフレンドリーなものにしていきましょう。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

画像切替 マウスオーバー this.src
関連記事