2 Replies Latest reply on Feb 20, 2010 7:25 PM by Zabeth69

    images: rollover image - link works but image doesn't change?

    helenelizabethwilson

      hi there.

       

      I am trying to make a rollover image so that when a user rolls over or clicks a link it changes colour.

       

      to do this I have saved the image in two different colours and have used the images:rollover image tool.

       

      when i preview the site however, the link works BUT the image doesn't change...

       

      here is the code ...

       

      <a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home 2.jpg',1)"><img src="images/home.jpg" name="home" width="100" height="40" border="0" id="home" /></a>

       

      I would very much appreciate any help.

       

      thanks in advance

        • 1. Re: images: rollover image - link works but image doesn't change?
          John Waller Adobe Community Professional & MVP

          Can you upload the files to webspace and provide a link to the live page?

          • 2. Re: images: rollover image - link works but image doesn't change?
            Zabeth69 Level 5

            Make sure you have uploaded both images to the server and that the path is correct in your code. If you browsed to the image files, the path should be fine.

             

            If the rollover works and the link works when you preview locally (in the browser, but not online), you have not uploaded all the appropriate files. If the rollover does not work, have you perhaps 'broken' the javascript that should be in the head of your document?

             

            This is what should be there:

            <script type="text/javascript">
            <!--
            function MM_swapImgRestore() { //v3.0
              var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
            }
            function MM_preloadImages() { //v3.0
              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
            }

            function MM_findObj(n, d) { //v4.01
              var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
              if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
              for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
              if(!x && d.getElementById) x=d.getElementById(n); return x;
            }

            function MM_swapImage() { //v3.0
              var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
               if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
            }
            //-->
            </script>

            The swap image (rollover) will not work if this code is missing, but the link will still work, because the link is plain html.

             

            Beth