-1

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%;} 
3
  • Just a comment: why don't you use CSS :hover pseudo class? You could use .sidebar:hover img.arrow {opacity: 0.5}.
    – VKen
    Oct 22, 2012 at 0:54
  • I would have used the hover if it were not for needing the opacity of the child altered on hover of the parent. I do not/did not know how to do that.
    – Ryan A.
    Oct 29, 2012 at 3:06
  • If you do not need to do something complex by hovering over a div and changing the css of an element from another place, :hover will perfectly do it. Here's an example with your code jsfiddle.net/nyt5b. You can check out the CSS part to get a better idea. Hover your mouse over the left and right where the buttons are, the child element #rightButton and #leftButton will change opacity. For performance and maintenance considerations: less code, less work, less bugs.
    – VKen
    Oct 29, 2012 at 4:25

1 Answer 1

0

You code for left:

onMouseOver="changeOpacity(this, 70)" 

but for right you are not using this:

onMouseOver="changeOpacity(rightButton, 70)"
3
  • I'm not sure I entirely follow. As I said in my statement, the left hand side is meant so that the Div and child image within have their opacity change. The right hand side is supposed to have it so that when the mouse is over "sidebar2" it alters the opacity of "rightButton". However it is only working in Firefox currently, not any other web browser. In Chrome, Safari and IE it does nothing onMouseOver for the right side.
    – Ryan A.
    Oct 20, 2012 at 1:53
  • Then you should not pass in rightButton as the parameter, instead of that use getElementByID('rightButton') to replace rightButton in the call
    – Simon Wang
    Oct 20, 2012 at 1:56
  • Thanks! I thought I would be able to pass rightButton through, but I guess Chrome and Safari aren't pleased.
    – Ryan A.
    Oct 20, 2012 at 1:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.