prototype.jsやjQueryなどのライブラリを使用しないエフェクトライブラリとしてbytefxがあります。まず、bytefxを以下のサイトからダウンロードします。
http://www.devpro.it/bytefx/index.php
bytefxにはコンパクト版や通常版などがありますが、容量が違う以外はどれでも同じです。ここでは通常版（可読可能なもの）実際に使用します。bytefxを使用する場合にはscriptタグで読み込むようにします。これは同一ディレクトリにある場合には以下のように指定します。
<script type="text/javascript" src="bytefx_OS.js"></script>
まず、簡単な不透明度処理を行ってみましょう。サポートされているブラウザはFirefox、Safari、Internet Explorer 5.5以上、Opera 9以上、Konqueror 3.6以上となっています。不透明度の処理を行うにはbytefx.alpha()を使います。bytefx.alphaの書式は以下のようになります。
bytefx.alpha(対象オブジェクト, 不透明度)
指定する不透明度は0〜100になります。他のライブラリでは0〜1となっていますが、bytefxでは0〜100なので注意してください。
対象オブジェクトはdocument.getElementById()などで指定します。例えばdivタグに指定されたID名がboxで50%の不透明度にするには以下のように指定します。
bytefx.alpha("box", 50);
以下のサンプルでは各ボタンをクリックすると、ボックスの不透明度が指定されたものになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>bytefx : 不透明度処理</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="bytefx_OS.js"></script>
<script type="text/javascript"><!--
function setAlpha(n)
{
bytefx.alpha(document.getElementById("box"), n);
}
// --></script>
</head>
<body>
<h1>bytefx : 不透明度処理</h1>
<form>
<input type="button" value="不透明度を20に設定" onClick="setAlpha(20)">
<input type="button" value="不透明度を50に設定" onClick="setAlpha(50)">
<input type="button" value="不透明度を100に設定" onClick="setAlpha(100)">
</form>
<div id="box">bytefx : を使った不透明度サンプル</div>
</body>
</html>
[
エフェクトの目次へ]
[
「Ajaxを勉強しよう」の目次へ]
(2006.10.1)