マウスオーバーで画像が浮き出るようにする（script.aculo.us）

説明

script.aculo.usライブラリを利用すると手軽に不透明度の処理を行うことができます。script.aculo.usライブラリはprototype.jsライブラリが必要なので、最初にprototype.sjライブラリを読み込ませます。マウスが重なった時にはonmouseoverイベントが発生するので、発生時の処理を指定しておきます。不透明度を変化させるにはEffect.Opacity()を使います。最初のパラメータには不透明度を変化させるオブジェクトまたはID名を指定します。サンプルではthisを指定していますが、これは画像自身を示すことになります。Effect.Opacity()の2番目のオプションでは開始不透明度と終了不透明度、そして変化する時間を秒数で指定します。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>マウスオーバーで画像が浮き出るようにする</h1>
<div id="photoAlbum">
<img src="images/DSC0001.jpg">
<img src="images/DSC0103.jpg">
<img src="images/DSC0280.jpg">
</div>
</body>
</html>
window.onload = function(){
var root = document.getElementById("photoAlbum");
var imgTag = root.getElementsByTagName("img");
for (var i=0; i<imgTag.length; i++){
imgTag[i].onmouseover = function(){
new Effect.Opacity(this, { from:0.5, to:1.0, duration:0.5 });
}
imgTag[i].onmouseout = function(){
new Effect.Opacity(this, { from:1.0, to:0.5, duration:0.5 });
}
}
}