画像の不透明度を設定するためにJavaScriptの「スライダー」機能を使用しています。
「value: 0.5;」と指定しているのに これは、スライダーの「バー」の位置を 0.5 に設定するだけで、実際には不透明度を 0.5 に変更しません。
ページ読み込み時のデフォルトの不透明度は常に 1.0 です。スライダー バー (0.5 の位置にあります) をクリックすると、0.5 の値が適用されますが、ページの読み込み時に既定値を指定したいと思います (もちろん、それに合わせてスライダーを設定します)。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').slider({
min: 0,
max: 1,
step: 0.01,
value: 0.5,
orientation: "horizontal",
slide: function(e,ui){
$('#box').css('opacity', ui.value)
}
})
});
</script>
<style type="text/css">
#slider { width: 100px;}
#box {position:absolute; top:40px; left:0px; z-index:-1; opacity:0.5;}
</style>
</head>
<body>
<p><div id="slider"></div>
<div id="box">
<img src="image.gif">
</div>
</body>
</html>