JavaScript

簡単にマウスオーバーで2枚の画像を切り替える方法【this.src】

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

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

※切替り前(logo.jpg)と切替り後(logo_on.jpg)の画像を2枚用意し、this.src=’画像’でマウスオーバー/アウト時の画像を切替えてます。imgタグにマウスオーバー時(onmouseover=”this.src=’logo_on.jpg’;”)とマウスアウト時(onmouseout=”this.src=’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>

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

※CSSの記述は以下の通りです。aタグマウスオーバー時にimgタグを50%透過させます。

<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を使った方が簡単そうです。

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