8 replies to this topic

[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>

Edited by Vswe, 21 March 2010 - 03:00 AM.

[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.

Edited by macneato, 21 April 2010 - 03:52 AM.
superfluous code

[EMDY]

Thank you. Solved.