onmouseover not working

[EMDY]

One of my onmouseover buttons is not working and I can't seem to spot the problem.

Assistance? Thank you.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.address.com/no/hl.jpg";
staticImage1 = new Image();
staticImage1.src = "http://www.address.com/no/hd.jpg";

loadImage2 = new Image();
loadImage2.src = "http://www.address.com/no/fl.jpg";
staticImage2 = new Image();
staticImage2.src = "http://www.address.com/no/fd.jpg";

loadImage3 = new Image();
loadImage3.src = "http://www.address.com/no/ol.jpg";
staticImage3 = new Image();
staticImage3.src = "http://www.address.com/no/od.jpg";

loadImage4 = new Image();
loadImage4.src = "http://www.address.com/no/rl.jpg";
staticImage4 = new Image();
staticImage4.src = "http://www.address.com/no/rd.jpg";

// End -->
</script>



<a href="http://www.address.com/no/INDEX.html" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.address.com/no/hd.jpg" border=0></a>

<a href="http://www.address.com/no/FINDIT.html" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="http://www.address.com/noN/fd.jpg" border=0></a>

<a href="http://www.address.com/no/FINDIT.html" onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="http://www.address.com/no/od.jpg" border=0></a>

<a href="http://www.address.com/no/RETAIL.html" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
<img name="image4" src="http://www.address.com/noN/rd.jpg" border=0></a>

[Sphexa]

Which image is not loading?

[EMDY]

It's image three, ol isn't working on mouse over

[macneato]

Did you use dreamweaver to code it? I can quickly write up a function if you willing to use jquery. Will solve your problem

[macneato]

Another quick question, why you using "noN" and "no" in specific places?

[EMDY]

I used notepad. Could you give me a specific example? Thank you. Do you see where the problem is in the current code?

[macneato]

Here is the script

         <script type="text/javascript">
          
              jQuery(document).ready(function() { 
                $("img.rollover").hover(
                 function()
                 {
                  this.src = this.src.replace("_default","_hover");
                 },
                 function()
                 {
                  this.src = this.src.replace("_hover","_default");
                 }
                );                              
              });
        </script>
        
        <a href="">
            <img  class="rollover" src="http://www.address.com/no/hd_default.jpg" alt="" title="" border="0" width="100" height="30" />
        </a>
        <a  href="">
            <img  class="rollover" src="http://www.address.com/no/fd_default.jpg" alt="" title="" border="0" width="100" height="30" />
        </a>        
        <a href="">
            <img  class="rollover" src="http://www.address.com/no/od_default.jpg" alt="" title="" border="0" width="100" height="30" />
        </a>    
        <a href="">
            <img  class="rollover" src="http://www.address.com/no/rd_default.jpg" alt="" title="" border="0" width="100" height="30" />
        </a>

Let me explain. You will need the suffix "_default" and "_hover".

default = Normal Image
hover = Hover State

NB Keep both states in the same folder

Now you will be able to apply a rollover state anywhere within your site by assigning the class "rollover" to an image.

Don't have Jquery?Download it.

[macneato]

Here is the script

         <script type="text/javascript">
          
              jQuery(document).ready(function() { 
                $("img.rollover").hover(
                 function()
                 {
                  this.src = this.src.replace("_default","_hover");
                 },
                 function()
                 {
                  this.src = this.src.replace("_hover","_default");
                 }
                );                              
              });
        </script>
        
        <a href="#">
            <img class="rollover" src="http://www.address.com/no/hd_default.jpg" alt="" title="" border="0" width="100" height="30" />
        </a>
        <a href="#">
            <img class="rollover" src="http://www.address.com/no/fd_default.jpg" alt="" title="" border="0" width="100" height="30" />
        </a>        
        <a href="#">
            <img class="rollover" src="http://www.address.com/no/od_default.jpg" alt="" title="" border="0" width="100" height="30" />
        </a>    
        <a href="#">
            <img class="rollover" src="http://www.address.com/no/rd_default.jpg" alt="" title="" border="0" width="100" height="30" />
        </a>

1. Get Jquery (google)
2. Add the suffix "_default" and "_hover" to the the image filename you would like to roll over.
-default is normal state, hover is over state
3. Assign the class "rollover" to the img tag.

NB: Ensure all your images are within the same directory.

[EMDY]

Thank you. Solved.