this.srcを使って簡単にマウスオーバーで2枚の画像を切り替える方法をご紹介します。
Contents
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アナリティクスタグは流用しないで下さい。
ディスプレイ広告