javascript - Rollover images
<p>I have been having a problem with roll-over image (coded in javascript) for a while already. I have found this thread: <a href="http://stackoverflow.com/questions/10215938/why-doesnt-my-simple-javascript-rollover-work">Why doesnt my simple javascript rollover work?</a> - 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?</p>

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


&lt;script type="text/jscript" language="javascript"&gt;
//&lt;!--
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");
    }
}
//// --&gt;
&lt;/script&gt;
&lt;/head&gt;


&lt;body&gt;
&lt;a style="height:82px; width:147px;" href="http://www.phuszcza.com" &gt;
&lt;img id="arrow" name="arrow" src="./images/blueArrow.gif"   onmouseout="move_out(this)"    
     onmouseover="move_over(this)" alt="arrow" /&gt;
&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
