First time making a Javascript script from scratch. This works perfectly in Firefox, but when viewed in Chrome or Safari the right sidebar doesn’t change opacity at all. This was designed so that when the mouse hovers over the sidebar div, it changes the opacity of the arrow img within that div. The left sidebar is set to be the same, but changes opacity of the div and img.
I designed it this way as the client wanted to see what both look like before coming to a decision which one to keep. Once that decision is made it will just be one or the other, so I need to get the right sidebar fixed up!
<!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>
and the 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%;}
You code for left:
but for right you are not using this: