www.webdeveloper.com
Results 1 to 6 of 6

Thread: MM_swapImage problem in IE8

  1. #1
    Join Date
    Oct 2010
    Posts
    5

    MM_swapImage problem in IE8

    I'm having some problems with an image map / javascript image swap. everything works fine in Firefox & Chrome but IE 7 & 8 fail (what's new?) I'm guessing it has something to do with my javascript syntax so if you all see something I don't please let me know. Thanks!

    Site URL: http://cash4scrap.aquablueweb.com


    The HTML:
    Code:
    <img id="Image-Maps_9201011041416461" src="/images/keyword-search2.jpg" usemap="#Image-Maps_9201011041416461" border="0" width="900" height="429" alt="" style="left:0; position:absolute; top:0; z-index:1;" />
    <map id="_Image-Maps_9201011041416461" name="Image-Maps_9201011041416461">
    <area onmouseover="MM_swapImage('Image-Maps_9201011041416461','','/images/tail-light2.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="197,280,236,280,245,243,236,233,208,236,200,251" href="http://www.image-maps.com/" alt="tail-light2" title="tail-light2"   />
    <area onmouseover="MM_swapImage('Image-Maps_9201011041416461','','/images/tail-light2.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="100,237,86,237,80,255,78,273,96,274,97,256" href="http://www.image-maps.com/" alt="tail-light2" title="tail-light2"   />
    <area onmouseover="MM_swapImage('Image-Maps_9201011041416461','','/images/bumper2.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="278,291,258,279,251,285,201,284,188,301,99,298,96,282,81,281,73,287,75,314,80,334,143,343,219,345,250,347,264,313" href="http://www.image-maps.com/" alt="rear-bumper" title="rear-bumper"   />
    <area onmouseover="MM_swapImage('Image-Maps_9201011041416461','','/images/fender2.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="391,297,404,274,418,279,416,260,394,248,388,255,388,277" href="http://www.image-maps.com/" alt="fender2" title="fender2"   />
    <area onmouseover="MM_swapImage('Image-Maps_9201011041416461','','/images/mirror2.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="376,247,389,245,398,234,379,223,371,236" href="http://www.image-maps.com/" alt="mirror" title="mirror"   />
    </map>
    The Javascript:
    Code:
    <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];}
    }
    //-->
    MM_preloadImages('/images/bumper.jpg', '/images/fender.jpg', '/images/grill.jpg', '/images/hood.jpg', '/images/headlight.jpg', '/images/mirror.jpg', '/images/fog-light.jpg', '/images/signal-light.jpg', '/images/rear-bumper.jpg', '/images/tail-light.jpg', '/images/tail-light2.jpg', '/images/mirror2.jpg', '/images/bumper2.jpg', '/images/fender2.jpg');
    </script>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    id is invalid, has already been used in img and id is not the same as name.
    Code:
    <map id="_Image-Maps_9201011041416461" name="Image-Maps_9201011041416461">
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Oct 2010
    Posts
    5
    Changed this and it didn't do anything.

    Code:
    <img id="imap1" src="/image/blank.png" usemap="#map1" />
    Code:
    <map id="map1" name="map1">

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Change it on your site and correct the other errors: http://validator.w3.org/check?verbos...blueweb.com%2F
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Oct 2010
    Posts
    5
    Thanks for sticking with me I've went ahead and fixed most of the errors & changed the map vs image id's. Any further ideas on how to get this working?

  6. #6
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by daebat View Post
    Thanks for sticking with me I've went ahead and fixed most of the errors & changed the map vs image id's. Any further ideas on how to get this working?
    You're passing the wrong parameter to the swapimage function. The first parameter should be the id of the image not the map. Firefox is probably combining the two elements internally which is why it works.
    To be consistent the image in the second div should be called map2
    Here is the search and replaced syntax that will work:
    Code:
    <div id="mydivon">
    <img id="map1" src="images/blank.png" usemap="#Image-Maps_7201011031106494" border="0" width="900" height="429" alt="" />
    <map id="Image-Maps_7201011031106494" name="Image-Maps_7201011031106494">
    <area onmouseover="MM_swapImage('map1','','images/bumper.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="327,302,332,323,340,347,362,348,363,325,383,326,386,349,469,345,478,329,478,304,470,297,459,312,408,312,390,303" href="http://www.image-maps.com/" alt="bumper" title="bumper"   />
    <area onmouseover="MM_swapImage('map1','','images/grill.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="392,284,456,281,464,296,454,308,410,309,393,301" href="http://www.image-maps.com/" alt="grill" title="grill"   />
    <area onmouseover="MM_swapImage('map1','','images/fog-light.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="365,324,382,327,386,348,366,347" href="http://www.image-maps.com/" alt="fog lights" title="fog lights"   />
    <area onmouseover="MM_swapImage('map1','','images/headlight.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="351,280,354,302,383,300,379,286,374,280" href="http://www.image-maps.com/" alt="headlight" title="headlight"   />
    <area onmouseover="MM_swapImage('map1','','images/signal-light.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="324,280,338,301,355,301,348,279" href="http://www.image-maps.com/" alt="turn signal" title="turn signal"   />
    <area onmouseover="MM_swapImage('map1','','images/fender.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="362,278,287,262,265,266,260,337,271,339,276,307,291,291,321,301,325,281" href="http://www.image-maps.com/" alt="fender" title="fender"   />
    <area onmouseover="MM_swapImage('map1','','images/rear-bumper.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="70,329,85,329,89,295,89,285,71,286,69,306" href="http://www.image-maps.com/" alt="rear bumper" title="rear bumper"   />
    <area onmouseover="MM_swapImage('map1','','images/tail-light.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="76,280,74,259,83,247,86,263" href="http://www.image-maps.com/" alt="tail light" title="tail light"   />
    <area onmouseover="MM_swapImage('map1','','images/mirror.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="255,267,266,263,259,252,248,243,229,250,241,263" href="http://www.image-maps.com/" alt="mirror" title="mirror"   />
    <area onmouseover="MM_swapImage('map1','','images/hood.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="382,283,418,278,447,277,458,278,440,267,395,253,358,253,290,256,330,270" href="http://www.image-maps.com/" alt="hood" title="hood"   />
    </map>
    </div>
    <!-- BACK IMAGE MAP!!! -->
    <div id="mydivoff">
    <img id="map2" src="images/keyword-search2.jpg" usemap="#Image-Maps_9201011041416461" border="0" width="900" height="429" alt="" style="left:0; position:absolute; top:0; z-index:1;" />
    <map id="_Image-Maps_9201011041416461" name="Image-Maps_9201011041416461">
    <area onmouseover="MM_swapImage('map2','','images/tail-light2.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="197,280,236,280,245,243,236,233,208,236,200,251" href="http://www.image-maps.com/" alt="tail-light2" title="tail-light2"   />
    <area onmouseover="MM_swapImage('map2','','images/tail-light2.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="100,237,86,237,80,255,78,273,96,274,97,256" href="http://www.image-maps.com/" alt="tail-light2" title="tail-light2"   />
    <area onmouseover="MM_swapImage('map2','','images/bumper2.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="278,291,258,279,251,285,201,284,188,301,99,298,96,282,81,281,73,287,75,314,80,334,143,343,219,345,250,347,264,313" href="http://www.image-maps.com/" alt="rear-bumper" title="rear-bumper"   />
    <area onmouseover="MM_swapImage('map2','','images/fender2.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="391,297,404,274,418,279,416,260,394,248,388,255,388,277" href="http://www.image-maps.com/" alt="fender2" title="fender2"   />
    <area onmouseover="MM_swapImage('map2','','images/mirror2.jpg',1)" onmouseout="MM_swapImgRestore()" shape="poly" coords="376,247,389,245,398,234,379,223,371,236" href="http://www.image-maps.com/" alt="mirror" title="mirror"   />
    </map>
    
    </div>
    Y_U U_G_A_E_U_ B_S_A_D_

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles