• I’m using Mantra Theme and have added some custom javasript to do a simple image replacement on mouseover. The code works fine outside of WordPress but when added as custom javascript to the Mantra theme nothing happens. Can someone point me in the right direction.

    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>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];}
    }

    html:

    </a><a href="contact"><img src="http://taylorwellsinsurance.com/wp-content/uploads/2013/09/InfoButton5.gif" alt="Physicians Liability Insurance Information from Taylor Wells Insurance" name="Image3" width="142" height="48"  id="Image3" class="aligncenter size-full wp-image-92"/>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code has now been permanently damaged by the forum’s parser.]

    Thanks,
    Michele

Viewing 4 replies - 1 through 4 (of 4 total)
  • I’m using Mantra Theme and have added some custom javasript to do a simple image replacement on mouseover.

    What image are you trying to change? Also, your html seems wrong or maybe just a typo, the closing </a> is in front of the opening tag?

    Image on hover can also be accomplished like this.

    <img src="http://example.com/image1.jpg" onmouseover="this.src='http://example.com/image2.jpg'" onmouseout="this.src='http://example.com/image1.jpg'" />
    Thread Starter mbarone

    (@mbarone)

    Thank you both for the replies. I had thought since the Mantra Theme allows for Custom Javascript that I wouldn’t need to edit the header files. I’m using firebug and can see the Javascript and the html with no errors. Sorry I posted the incorrect html. Here’s what I’m using and it matches the javascript I posted earlier.

    [Mangled code removed]

    Thread Starter mbarone

    (@mbarone)

    Sorry everyone. I’m a newbee to this form. OK now I have read about adding ‘backticks’ around code. I couldn’t figure out why half the html was disappearing.

    <a href="contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','http://taylorwellsinsurance.com/wp-content/uploads/2013/09/InfoButton5Over.gif',1)"><img src="http://taylorwellsinsurance.com/wp-content/uploads/2013/09/InfoButton5.gif" alt="Physicians Liability Insurance Information from Taylor Wells Insurance" name="Image3" width="142" height="48" id="Image3" class="aligncenter size-full wp-image-92"/>

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Mantra Theme Javascript mouseover not working’ is closed to new replies.