javascript - Rollover images

Question

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>

Answer 1

There are several problems here.

You are using code designed for compatibility with Netscape. It is now 2013.
You are using eval .
You passing this to move_out and move_over , but treating elemname as a string.
You're initializing arrowout and arrowover and doing absolutely nothing with them.
Your <a> element is inline; giving it a width and height in CSS won't change anything.
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');
}

javascript - Rollover images

Question

1 answers

solution1
2 ACCPTED 2013-03-01 00:13:38

javascript - Rollover images

Question

1 answers

solution1 2 ACCPTED 2013-03-01 00:13:38

solution1
2 ACCPTED 2013-03-01 00:13:38