| 解 説 |
マウスオーバーで画像がモザイク状態から鮮明になるようにするには、あらかじめスタイルシートでフィルタを指定しておきます。処理したい画像のみ記述しonMouseover、onMouseoutでマウスイベントを検知しモザイク処理を開始します。onMouseoverの際にマウスが乗った画像オブジェクトを引数として渡し、その画像オブジェクトに対してのみフィルタ処理を行うようにします。定期的に処理するためタイマーを利用しモザイク処理をおこなう関数を呼び出します。
|
| コード |
<![CDATA[
<html>
<head>
<title>マウスオーバーで画像がモザイク状態から鮮明になるようにする</title>
<script language="JavaScript"><!--
imgObj = null;
dSize = cSize = 50;
function procImg()
{
if (!imgObj) return;
if (cSize < 3) { imgObj.filters[0].enabled = false; return;}
imgObj.filters[0].MaxSquare = cSize--;
}
function setImg(iObj)
{
imgObj = iObj;
cSize = dSize;
}
function resetImg()
{
if (!imgObj) return;
imgObj.filters[0].enabled = true;
imgObj.filters[0].MaxSquare = dSize;
imgObj = null;
}
// --></script>
</head>
<body onLoad="setInterval('procImg()',50)">
マウスを載せると画像がモザイク状態から鮮明になります。<br><br>
<img src="image1.jpg" style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=1)"
onMouseover="setImg(this)" onMouseout="resetImg()">
<img src="image2.jpg" style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=1)"
onMouseover="setImg(this)" onMouseout="resetImg()">
<img src="image3.jpg" style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=1)"
onMouseover="setImg(this)" onMouseout="resetImg()">
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
マウスオーバーで画像がモザイク状態から鮮明になるようにする