-1

I have been having a problem with roll-over image (coded in javascript) for a while already. I have found this thread: Why doesnt my simple javascript rollover work? - about exactly the same problem - I guess. When I try the code in Firefox on Windows - there is simply no roll-over effect, except for a very brief period of time when I click the button (only borders change colour to red -> for a very, very short time) - image does not change at all... Blue arrow - supposed to change to red arrow on mouseover and back to blue onmouseout but it does nothing. Link works fine though. I have followed exactly (I believe) advice given in the previous thread on the same problem, but no effect at all... Is javascript so unpredictable? Why my code (below) doesn't work - living no roll-over effect at all?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org      /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's try this Roll-over effect !</title>


<script type="text/jscript" language="javascript">
//<!--
if(document.images){
    arrowout = new Image();
    arrowout.src = "./images/blueArrow.gif";
    arrowover = new Image();
    arrowover.src = "./images/redArrow.gif";
}

function move_over(elemname){
    if(document.images){
        document[elemname].src = eval(elemname + "over.src");
    }
}

function move_out(elemname){
    if(document.images){
        document[elemname].src = eval(elemname + "out.src");
    }
}
//// -->
</script>
</head>


<body>
<a style="height:82px; width:147px;" href="http://www.phuszcza.com" >
<img id="arrow" name="arrow" src="./images/blueArrow.gif"   onmouseout="move_out(this)"    
     onmouseover="move_over(this)" alt="arrow" />
</a>
</body>
</html>
Community
  • 1
  • 1
Pawel Huszcza
  • 49
  • 7

1 Answers1

2

There are several problems here.

  1. You are using code designed for compatibility with Netscape. It is now 2013.

  2. You are using eval.

  3. You passing this to move_out and move_over, but treating elemname as a string.

  4. You’re initializing arrowout and arrowover and doing absolutely nothing with them.

  5. Your <a> element is inline; giving it a width and height in CSS won’t change anything.

  6. You are doing this with JavaScript.

Use CSS instead.

<a id="arrow" href="http://www.phuszcza.com">Go to some page</a>

#arrow {
    background-image: url('images/blueArrow.gif');
    display: inline-block;
    height: 82px;
    text-indent: -9999px;
    width: 147px;
}

#arrow:hover {
    background-image: url('images/redArrow.gif');
}
Ry-
  • 218,210
  • 55
  • 464
  • 476