| 解 説 |
画像の上にマウスが乗ったら画像が半透明から不透明になるようにするにはimgタグ内にスタイルシートを使って透明度を指定しておきます。透明度はfilter:alpha(opacity=50)のように指定します。0が透明で100が不透明になります。マウスが乗ったら関数を呼び出すのではなくグローバル変数に画像オブジェクトを代入します。これはページ構築後にフェードインする関数を定期的に呼び出しており、フェードインさせる画像があるかどうかを判断し、あればフェードイン、そうでなければ何もしないようになっています。JavaScriptで透明度を指定するにはiObj.filters["alpha"].opacityに0〜100までの値を代入します。透明度を少しずつ変化させればフェードインします。
|
| コード |
<![CDATA[
<html>
<head>
<title>画像の上にマウスが乗ったら画像が半透明から不透明になるようにする</title>
<script language="JavaScript"><!--
iObj = null;
function fadeIn()
{
if (!iObj) return;
t = iObj.filters["alpha"].opacity + 5;
if (t <= 100) iObj.filters["alpha"].opacity = t;
}
function fadeOut()
{
iObj.filters["alpha"].opacity = 50; // 最初の不透明度
iObj = null;
}
// --></script>
</head>
<body onLoad="setInterval('fadeIn()',100);">
画像の上にマウスが乗ったら画像が半透明から不透明になります。<br><br>
<img src="image1.jpg" style="filter:alpha(opacity=50)" onMouseover="iObj=this" onMouseout="fadeOut()">
<img src="image2.jpg" style="filter:alpha(opacity=50)" onMouseover="iObj=this" onMouseout="fadeOut()">
<img src="image3.jpg" style="filter:alpha(opacity=50)" onMouseover="iObj=this" onMouseout="fadeOut()">
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
画像の上にマウスが乗ったら画像が半透明から不透明になるようにする