bytefxでカラー変更処理（特定の色から特定の色に変化させる）を行うにはbytefx.color()を使います。bytefx.colorの書式は以下のようになります。
bytefx.color(対象オブジェクト, スタイルプロパティ名, 開始色, 終了色, 速度, コールバック処理)
対象オブジェクトはdocument.getElementById()などで指定します。スタイルプロパティ名はbackgroundColorやcolorなどJavaScriptでスタイルシートを操作する場合に指定するものになります。開始色と終了色は#224、#ac5688など3桁または6桁のカラーコードになります。redやblueなどカラー名を指定した場合は動作しないので注意が必要です。速度は値が小さいほどゆっくり色が変化し、値が大きくなるほど速く色が変化します。
以下のサンプルではボタンをクリックすると、ボックスの背景色が赤色から青色に変化します。（サンプルを
実行する）
<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 colorfade()
{
bytefx.color(document.getElementById("box"), "backgroundColor", "#ff0000", "#0000ff", 1);
}
// --></script>
</head>
<body>
<h1>bytefx : カラー変更処理</h1>
<form>
<input type="button" value="カラー変更開始" onClick="colorfade()">
</form>
<div id="box">bytefx : を使ったカラー変更サンプル</div>
</body>
</html>
カラー変更処理が完了した時に処理を行わせることもできます。この場合は、bytefx.color()の最後のパラメータに処理を記述します。以下のサンプルでは処理が終了した際に関数msgを呼び出し、完了の旨のメッセージを表示します。（サンプルを
実行する）
<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 colorfade()
{
bytefx.color(document.getElementById("box"), "backgroundColor", "#ff0000", "#0000ff", 1,
msg);
}
function msg()
{
document.getElementById("result").innerHTML = "カラー変更処理完了";
}
// --></script>
</head>
<body>
<h1>bytefx : カラー変更処理</h1>
<form>
<input type="button" value="カラー変更開始" onClick="colorfade()">
</form>
<div id="result"></div>
<div id="box">bytefx : を使ったカラー変更サンプル</div>
</body>
</html>
背景色でなく文字色を変化させるにはcolorプロパティを指定します。（サンプルを
実行する）
<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 colorfade()
{
bytefx.color(document.getElementById("box"),
"color", "#ff0000", "#0000ff", 1);
}
// --></script>
</head>
<body>
<h1>bytefx : カラー変更処理</h1>
<form>
<input type="button" value="カラー変更開始" onClick="colorfade()">
</form>
<div id="box">bytefx : を使ったカラー変更サンプル</div>
</body>
</html>
枠の色を変化させるにはborderColorプロパティを指定します。（サンプルを
実行する）
<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 colorfade()
{
bytefx.color(document.getElementById("box"),
"borderColor", "#ff0000", "#0000ff", 1);
}
// --></script>
</head>
<body>
<h1>bytefx : カラー変更処理</h1>
<form>
<input type="button" value="カラー変更開始" onClick="colorfade()">
</form>
<div id="box">bytefx : を使ったカラー変更サンプル</div>
</body>
</html>
[
エフェクトの目次へ]
[
「Ajaxを勉強しよう」の目次へ]
(2006.10.2)