2010年6月13日日曜日

5秒でできる。簡単!ロールオーバー画像の作り方

マウスが重なったときに、ボタンがハイライトになる効果が簡単に作れます。これまでは、通常のボタン画像以外に、ハイライト用画像を作り、それをJavascriptで切り替えると思います。

この方法は、ハイライト用画像さえも作る必要がありません♪
<img>タグに、Javascriptをちょこっと書き足すだけです。



■SAMPLE:ただのボタン画像



ソース:
<img src="http://1.bp.blogspot.com/_AsBzyRlpnrA/S5pnqcLzfMI/AAAAAAAAALk/3gztjxCdolU/s400/CapD20100313_2.jpeg" border="0">


■SAMPLE:簡単!ロールオーバー画像!



ソース:
<img src="http://1.bp.blogspot.com/_AsBzyRlpnrA/S5pnqcLzfMI/AAAAAAAAALk/3gztjxCdolU/s400/CapD20100313_2.jpeg" border="0" onMouseOver="this.style.opacity=0.7;this.style.filter ='alpha(opacity=70)'" onMouseOut="this.style.opacity=1.0;this.style.filter ='alpha(opacity=100)'" >



◎作り方:
<img>タグに、以下2つの属性を混ぜています。

onMouseOver="this.style.opacity=0.7;this.style.filter ='alpha(opacity=70)'"
オンマウスで、薄くする(ハイライト)

onMouseOut="this.style.opacity=1.0;this.style.filter ='alpha(opacity=100)'" マウスが外れたら、元に戻す


できあがったら、imgタグを、aタグで挟んでリンクにすることで、重ねた時のカーソルが指マークに変わります。(または、style="cursor:pointer;cursor:hand" 属性をimgタグに追加してください)





これだけで初心者でも、スピードが求められるときでも、速攻で作れますね。

もちろん、CSS の hover属性を使っても同じように出来ますので、全体的に使うときはその方がすっきりします。


   



1 件のコメント:

栗山真行 さんのコメント...

ロールオーバーの画像を作成しなければ・・と悩んでいたところ、貴殿のホームページを見つけました。
画像の作成は不要で、簡単にできました。
とても助かりました。
ありがとうございました。
今後もよろしくお願い致します。