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

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

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

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

No.3 回答者： ryouta0616 回答日時： 2009/11/27 03:10

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 回答日時： 2009/11/23 04:59

これが使いやすいのでは

http://css-happylife.com/log/javascript/000157.s …

No.1 回答者： Wizard_Zero 回答日時： 2009/11/22 21:06

元画像とは別に、元画像にホワイトアウト効果を施した画像を用意し、マウスオーバーで画像が切り替わるJavaScriptを仕掛けてください。

マウスオーバーによる画像の切り替えについては、「JavaScript 画像 切り替え」をキーワードにGoogleなどで検索すればたくさん見つかります。

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