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

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

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



■SAMPLE：ただのボタン画像



ソース：
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhh-EW2C1LzWWxZ4Ibthqlkue28amzkSlq9tNYiyRscCcwGN4SkumU4bK1YO2AwinFG4_OP6oRsgUw8nS86aQhm9btUdFNzIkjWBns3LEr5cOPtRpOX1mmW8QLb4n31XyFa7gq7lzXg3u/s400/CapD20100313_2.jpeg" border="0">


■SAMPLE：簡単！ロールオーバー画像！



ソース：
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhh-EW2C1LzWWxZ4Ibthqlkue28amzkSlq9tNYiyRscCcwGN4SkumU4bK1YO2AwinFG4_OP6oRsgUw8nS86aQhm9btUdFNzIkjWBns3LEr5cOPtRpOX1mmW8QLb4n31XyFa7gq7lzXg3u/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)'" >



◎作り方：
＜ｉｍｇ＞タグに、以下２つの属性を混ぜています。

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属性を使っても同じように出来ますので、全体的に使うときはその方がすっきりします。