不透明度の処理

　文字や画像などに不透明度を設定するにはスタイルシートを利用します。ただし、不透明度を指定できるブラウザはInternet Explorer 4以降、Firefox (Netscape 6以降, Mozilla)、Safariのみです。Opera は不透明度をサポートしていません。
　また、ブラウザごとに指定方法が異なります（スタイルシートプロパティ名と設定値が異なる）。

ブラウザプロパティ設定値の範囲
Internet Explorerfilter:alpha(opacity=値)0〜100 (整数値)
FirefoxmozOpacity=値0〜1.0 (小数値)
Safariopacity=値0〜1.0 (小数値)

　実際にスタイルシートで指定する場合には3つのブラウザに対応させるため以下のように列記します。

#photo {
position:absolute;
-moz-opacity:0.5;
opacity:0.5;
filter:alpha(opacity=50);
}

　HTMLは以下のように記述します。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>半透明で表示する</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
</head>
<body>
<h1>半透明で表示する</h1>
<img src="photo.jpg">
<img src="photo.jpg" id="photo">
</body>
</html>

　これで不透明度が50%の画像が表示されます。Operaなど不透明度をサポートしていないブラウザでは通常の状態で画像が表示されます。
不透明度をJavaScriptから制御する場合には、それぞれのブラウザに対応するスタイルシートプロパティに値を設定します。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>半透明で表示する</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
n = 100; // 不透明度
function fadein()
{
var obj = document.getElementById("photo");
obj.style.opacity = n / 100;
obj.style.mozOpacity = n / 100;
obj.style.filter = "alpha(opacity="+n+")";
 n += 5;
if (n < 100) setTimeout("fadein()",50);
}
function fadeout()
{
var obj = document.getElementById("photo");
obj.style.opacity = n / 100;
obj.style.mozOpacity = n / 100;
obj.style.filter = "alpha(opacity="+n+")";
 n -= 5;
if (n >= 0) setTimeout("fadeout()",50);
}
// --></script>
</head>
<body>
<h1>半透明で表示する</h1>
<form>
<input type="button" value="フェードイン" onClick="fadein()">
<input type="button" value="フェードアウト" onClick="fadeout()"><br>
</form>
<img src="photo.jpg" id="photo">
</body>
</html>

[枠のズームアニメーション]
[目次へ]

(2006.1.30)