-1

Javascript スクリプトをゼロから作成するのは初めてです。これは Firefox では完全に機能しますが、Chrome または Safari で表示すると、右側のサイドバーの不透明度はまったく変わりません。これは、マウスがサイドバー div の上に置かれると、その div 内の矢印 img の不透明度が変更されるように設計されています。左のサイドバーは同じに設定されていますが、div と img の不透明度が変更されています。

クライアントは、どちらを残すかを決める前に、両方がどのように見えるかを確認したかったので、このように設計しました。その決定が下されたら、それはどちらかになるだけなので、右側のサイドバーを修正する必要があります!

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Giterman Designs</title>     
<link rel="stylesheet" type="text/css" href="style.css"> 


<script type="text/javascript">
function changeOpacity(elm, value) {
   elm.style.opacity = (value / 100);
   elm.style.MozOpacity = (value / 100);
   elm.style.KhtmlOpacity = (value / 100);
   elm.style.filter = "alpha(opacity=" + (value) + ")";
   elm.style.MsFilter = " 'progid:DXImageTransform.Microsoft.Alpha(opacity=" + (value) + ")' ";}
</script>

</head> 
<body>

<!-- Left Side: Hover over Div, Div+Image shifts opacity -->
<div id="leftNav" class="sidebar" onMouseOver="changeOpacity(this, 70)" onMouseOut="changeOpacity(this, 20)">
    <img src="image/leftNav.png" id="leftButton" class="arrow" alt=""></div>

<!-- Right Side: Hover over Div, Image shifts opacity -->       
<div id="rightNav" class="sidebar2" onMouseOver="changeOpacity(rightButton, 70)" onMouseOut="changeOpacity(rightButton, 20)">
    <img src="image/rightNav.png" id="rightButton" class="arrow" alt=""></div>
</body>
</html>

そしてCSS

body{
background: url("image/bg.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

div#leftNav{
position:absolute; left:0;}

div#rightNav{
position:absolute; right:0;}

/* Left Side-bar */
.sidebar{
background:#000000; width: 55px; height: 100%; top:0; opacity:0.20;}

/* Right Side-bar */
.sidebar2{
background: url("image/bar.png") repeat-y; width: 55px; height: 100%; top:0;}

/* Needed to seperate arrow opacity for Right Side-bar attempt */
#rightButton{
opacity: 0.20;}

img.arrow{
position: absolute; top: 50%; left: 50%; margin: 0 0 0 -35%;}
4

1 に答える 1

0

左のコード：

onMouseOver="changeOpacity(this, 70)"

しかし、あなたはこれを使用していません：

onMouseOver="changeOpacity(rightButton, 70)"
于 2012-10-20T01:49:44.863 に答える