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

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

Contents

imgタグのonmouseover／onmouseoutにthis.srcを記述する方法
CSSでマウスオーバー時に画像を薄くする方法
マウスオーバー時の画像切替演出を簡単に実現するデモページ

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>