超簡単にマウスオーバー画像を切り替える方法:this.src

簡単にマウスオーバー画像を切り替える方法

1.imgタグのonmouseover/onmouseoutに記述する方法

(切替り前と切替り後の画像を2枚用意する方法)

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

this.src=’画像’でマウスオーバー/アウト時の画像を切替えてます。

2-1.CSSで画像を薄くする方法(CSSの記述)

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

2-2.CSSで画像を薄くする方法(htmlの記述)

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