this.src:マウスオーバー時の画像切替を簡単に実現する記述



グランドメニューや各ページのボタンやサムネイル等にリンクが貼っている時、
カーソルを持って行って、見た目に何も反応が無いとちょっと物足りない感があります。
見た目はちょっとしたことだけど、
そんなことに複雑なJavaScriptを考えるのも面倒だなって思ってる時に良いかも知れません。

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

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

    <a href="/" title="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN" target="_blank">
    <img src="logo01.jpg" width="70" height="87" alt="BLINDER HIDDEN" border="0" onmouseover="this.src='logo01_on.jpg';" onmouseout="this.src='logo01.jpg'">
    </a>

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

 

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

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

 

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

    <div id="idBtn" align="center">
    <a href="/" title="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN" target="_blank">
    <img src="logo01.jpg" width="70" height="87" alt="BLINDER HIDDEN" border="0">
    </a>
    </div>

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

マウスオーバーで色や画像自体が別のモノに変わったりする時は、this.srcを使った方が簡単そうですね。
画像を薄くする程度だったらCSSで良さそうですが、
他にも色々と方法はあると思いますが何か一番スタンダードなのでしょうか。