Image Swap Function on Rollover – Can you solve?!

  • Resolved adventureseeker

    (@adventureseeker)


    12 years, 7 months ago

    Hi all. I have a map that I created which contains about 10 “poly” hotspots. These hotspots have image swap behavior to them. When I export the HTML code and paste into my WP page the behavior doesn’t follow.

    I have copied the JS from dreamweaver and added this JS file into my site. I am successfully (I think) calling the script since when I hover over the test “pin” located at LA, I get a ‘javascript’; popup but the image doesn’t swap. Here is the code that I have in my js file:

    <script language="JavaScript1.2" type="text/javascript">
<!--
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];}
}
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];}}
}

//-->
</script>

    Here is my HTML code I am entering into my WP page (this is a shortened version with just one image swap function)

    <onload="MM_preloadImages('https://recordyouradventures.com/test/wp-content/uploads/2012/08/Los-Angeles-CA.png','https://recordyouradventures.com/test/wp-content/uploads/2012/08/MAP-MASTER2.png');">

<img name="mapmaster2" src="https://recordyouradventures.com/test/wp-content/uploads/2012/08/MAP-MASTER2.png" width="973" height="664" border="0" id="mapmaster2" usemap="#mapmaster2" alt="" /><map name="mapmaster2" id="mapmaster2">
<area shape="poly" coords="87,405,90,398,92,392,87,387,82,384,71,388,71,396,68,405,68,420,70,426,77,426,87,405" href="javascript:;" alt="" onmouseout="MM_swapImage('mapmaster2','','https://recordyouradventures.com/test/wp-content/uploads/2012/08/MAP-MASTER2.png',1);"  onmouseover="MM_swapImage('mapmaster2','','https://recordyouradventures.com/test/wp-content/uploads/2012/08/Los-Angeles-CA.png',1);"  />

    The map can be seen: https://www.recordyouradventures.com/test
    Hover over the LA pin to see what does/doesn’t happen!

    Any help would be greatly appreciated. Thank you!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter adventureseeker

    (@adventureseeker)

    And I should mention that I have entered this code into my WP page before everything, to call the JS file. 

    <script type="text/javascript" src="https://recordyouradventures.com/test/wp-admin/js/interactive-map.js"></script>
<script type="text/javascript">
<!–

MM_findObj();
MM_swapImage();
MM_preloadImages();

//–></script>
    Thread Starter adventureseeker

    (@adventureseeker)

    I located the issue, just in case others need help with this issue in future.

    The issue I found was with the JS file not being called properly. I added the Javascript to the head.php file of my theme (didn’t really want to for loading purposes) and it’s operating properly.

    can you show the code to see how you fix it? iwant to do the same thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image Swap Function on Rollover – Can you solve?!’ is closed to new replies.