| 解 説 |
画像の上にマウスが乗ったらグレー画像からカラー画像にするにはimgタグにfilter:gray()としてグレーフィルタを適用します。マウスが乗ったらフィルタ効果をオフにします。これは「画像オブジェクト.filters["gray"].enabled」にfalseを指定します。trueを指定するとグレーフィルタが適用されます。
|
| コード |
<![CDATA[
<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! |
画像の上にマウスが乗ったらグレー画像からカラー画像にする