Spry prerelease 1.3のエフェクトの１つにハイライト効果があります。ハイライト効果は指定されたオブジェクトの不透明度を変化させ、光っているような感じにみせたり、クリックで色を交互に表示させることができます。
まず、エフェクト対象になるオブジェクトにID名を指定しておきます。指定したID名をSpry.Effect.Highlight()の最初のパラメータに指定します。以下のサンプルではボックスにマウスを重ねると黒から白へ色が変化し、白になったら瞬時に最初の色に戻ります。（サンプルを
実行する）
＊release 1.3にはバグがあるようで、素早くマウスを乗せると「startColor is not defined」(Firefox）というエラーが発生してしまいます。他にもsetupを指定するとエラーが発生するなど、一部不具合があります。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onmouseover = function() {
Spry.Effect.Highlight("myBox", { from:"#202000", to:"#ffffff"} );
}
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル<br>ハイライト</div>
</body>
</html>
Spry.Effect.Highlight()のパラメータにはハイライト表示までの時間を指定することができます。時間の指定はdurationで行い、指定する値はミリ秒になります。以下のサンプルでは300ミリ秒でハイライト表示を行います。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onmouseover = function() {
Spry.Effect.Highlight("myBox", {
duration: 300, from:"#202000", to:"#ffffff"} );
}
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル<br>ハイライト</div>
</body>
</html>
ハイライト表示後に最初の色とは異なる色を表示させる場合にはrestoreColorを使います。#で始まる16進数の色コードを指定します。スタイルシートのように#ffcなど3桁ではエラーになるので注意が必要です。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onmouseover = function() {
Spry.Effect.Highlight("myBox", { duration: 300, from:"#202000", to:"#ffffff",
restoreColor:"#f0f000"} );
}
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル<br>ハイライト</div>
</body>
</html>
ハイライト終了後の色を交互に変えるにはtoggleを使います。初期値はfalseになっています。交互に色を切り替えるにはtoggle:trueとします。以下のサンプルではクリックするごとに最終の色が切り替わります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#000040;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onclick = function() {
Spry.Effect.Highlight("myBox", { duration: 200, from:"#000040", to:"#ffffff", restoreColor:"#009030",
toggle:true } );
}
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル<br>ハイライト</div>
</body>
</html>
エフェクトの開始時に特定の処理を行いたい場合にはsetupを指定します。パラメータには呼び出す処理（関数）を指定します。呼び出される関数側には2つのパラメータが渡されます。1つ目はエフェクト対象となるエレメント名（オブジェクト名）、2つ目が適用されるエフェクト（オブジェクト）になります。以下のサンプルでは、エフェクト開始時にアラートダイアログを表示するものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onmouseover = function() {
Spry.Effect.Highlight("myBox", { duration: 300, from:"#202000", to:"#ffffff",
setup:message } );
}
}
function message(element,effect) {
alert(element+"に"+effect+"効果の処理を開始");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル<br>ハイライト</div>
</body>
</html>
フェード開始終了時にも同様に処理を指定することができます。この場合にはfinishを使います。finishのパラメータには呼び出す関数を指定します。この関数にはsetupと同じ2つのパラメータが渡されます。以下のサンプルはエフェクト終了時に関数を呼び出すものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myBox").onmouseover = function() {
Spry.Effect.Highlight("myBox", { duration: 300, from:"#202000", to:"#ffffff",
finish:message } );
}
}
function message(element,effect) {
alert(element+"に"+effect+"効果の処理が終了");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<div id="myBox">Spryエフェクト<br>サンプル<br>ハイライト</div>
</body>
</html>
[
目次へ]
(2006.9.6)