マウスオーバーで薄いホワイトに変わる方法を教えてください。初心者です。

質問

こんにちわ。
ホームページを作っていますが、まだまだ初心者の域を脱せないでいるモノです。
マウスオーバーすると、元の画像に薄いホワイトアウトする感じの効果をしたいのですが、調べても解決しないでいます。

どなたか、わかりやすい方法を教えてくださいますでしょうか？

こんなプロの方々のカテゴリーで恐縮ですが、よろしくお願いいたします！

回答No.3

ryouta0616

cssは分かりますか？もし理解できるならcssでマウスオーバーした際にその画像の色を薄くするのはどうでしょうか。
背景が白ならご希望通りホワイトアウトしますが、背景が赤ならうすく赤くなってしまいます。
ただjava scriptは面倒ですし個人的にはマウスオーバーの画像を作らずにマウスオーバーをはっきり認識させたいだけなら
cssで画像を半透明にするのが良いかと。

css
--------------------
.a:hover img,.a:active img{
filter:alpha(opacity= 70); /* IE */
-moz-opacity:0.70; /* Firefox CSS3以前 */
opacity:0.70; /* CSS3 */
}
html
--------------------
<div>
<a html="リンク先url" title="リンク先タイトル"><img src="画像のurl" /></a>
</div>

これでカーソルを合わせるとaの中のimgは70%に透過されます。
もちろん80や90など変更可能です。

回答No.2

metametamu

これが使いやすいのでは

http://css-happylife.com/log/javascript/000157.shtml

回答No.1

うぃず（@Wizard_Zero）

元画像とは別に、元画像にホワイトアウト効果を施した画像を用意し、マウスオーバーで画像が切り替わるJavaScriptを仕掛けてください。
マウスオーバーによる画像の切り替えについては、「JavaScript 画像 切り替え」をキーワードにGoogleなどで検索すればたくさん見つかります。

画像切り替えではなくブラウザのエフェクト機能でもできますが、ブラウザが限定されてしまうのでお勧めしません。