画像の上にマウスが乗ったらグレー画像からカラー画像にする

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows - × ×
Macintosh × × × - - × ×
UNIX - - - - - × ×

解  説  画像の上にマウスが乗ったらグレー画像からカラー画像にするにはimgタグにfilter:gray()としてグレーフィルタを適用します。マウスが乗ったらフィルタ効果をオフにします。これは「画像オブジェクト.filters["gray"].enabled」にfalseを指定します。trueを指定するとグレーフィルタが適用されます。
コード <html> <head> <title>画像の上にマウスが乗ったらグレー画像からカラー画像にする</title> <script language="JavaScript"><!-- function setGray(iObj) { iObj.filters["gray"].enabled = false; } function resetGray(iObj) { iObj.filters["gray"].enabled = true; } // --></script> </head> <body> 画像の上にマウスが乗ったらグレー画像からカラー画像にします。<br><br> <img src="image0.jpg" style="filter:gray()" onMouseover="setGray(this)" onMouseout="resetGray(this)"> <img src="image1.jpg" style="filter:gray()" onMouseover="setGray(this)" onMouseout="resetGray(this)"> <img src="image2.jpg" style="filter:gray()" onMouseover="setGray(this)" onMouseout="resetGray(this)"> <img src="image3.jpg" style="filter:gray()" onMouseover="setGray(this)" onMouseout="resetGray(this)"> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!