ImageMap and MM_swapImage Function

  • Resolved jarea

    (@jarea)


    10 years, 2 months ago

    I have been trying all day to get this to work with no success.

    Tried this on Firefox and Chrome. BTW, I don’t care about the href links in the code … just trying to get the swapImage to work.

    I have placed the following two javascripts in the header:

    <script language="JavaScript" 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>
    <script type="text/javascript" language="JavaScript">
MM_findObj();
MM_swapImage();
MM_preloadImages();</script>

    And I have the following code on my page:

    <img src="../images/GeoShapes.png"  alt="GeoShapes" usemap="#imageMapShapes"></p>
<map name="imageMapShapes">
<area shape="rect" coords="218,217,432,430" alt="" target="_parent" href="../***Triangle Name***.html" alt="Triangle Name" title="Triangle Name" onmouseover="MM_swapImage('../images/GeoShapes.png','','../images/GeoShapes Triangle.png',1);" onmouseout="MM_swapImage('../images/GeoShapes.png','','../images/GeoShapes Triangle.png',1);”>
</map>

    When I hover over the Triangle quadrant, the Alt Text appears and the href link is hot, but the two images are not swapped.

    Update: I was able to complete a small test and confirm that the MM_swapImage function does work.

    Any help in figuring out why this does not fly would be greatly appreciated.

    Thanks

Viewing 1 replies (of 1 total)
  • Thread Starter jarea

    (@jarea)

    Turns out I was not doing the function call(s) correctly. Got it working now. For others interested in this, here is the correct code (or at least code that works) with all four of the areas on the imagemap.

    <body onLoad="MM_preloadImages('../images/GeoShapes Triangle.png')" onLoad="MM_preloadImages('../images/GeoShapes Star.png')" onLoad="MM_preloadImages('../images/GeoShapes Square.png')" onLoad="MM_preloadImages('../images/GeoShapes Circle.png')">
<img src="../images/GeoShapes.png" alt="This is your Alt Text" name="TestImage" border="0" usemap="#imageMapShapes"></a>
<map name="imageMapShapes">
<area onMouseOut="MM_swapImgRestore()" onmouseover="MM_swapImage('TestImage','','../images/GeoShapes Triangle.png',1);" shape="rect" coords="218,217,432,430" alt="" target="_parent" href="../***Triangle Name***.html" alt="Triangle Name" title="Triangle Name">
<area onMouseOut="MM_swapImgRestore()" onmouseover="MM_swapImage('TestImage','','../images/GeoShapes Star.png',1);" shape="rect" coords="2,218,215,431" alt="" target="_parent" href="../***Star Name***.html" alt="Star Name" title="Star Name">
<area onMouseOut="MM_swapImgRestore()" onmouseover="MM_swapImage('TestImage','','../images/GeoShapes Circle.png',1);" shape="rect" coords="2,2,214,213" alt="" target="_parent" href="../***Circle Name***.html" alt="Circle Name" title="Circle Name">
<area onMouseOut="MM_swapImgRestore()" onmouseover="MM_swapImage('TestImage','','../images/GeoShapes Square.png',1);" shape="rect" coords="217,3,430,213" alt="" target="_parent" href="../***Square Name***.html" alt="Square Name" title="Square Name">
</map>

    Also added the function swapImgRestore() to the functions in the header.

    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;
}
Viewing 1 replies (of 1 total)
  • The topic ‘ImageMap and MM_swapImage Function’ is closed to new replies.