/    Sign up×
Community /Pin to ProfileBookmark

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!

[B]Site URL: [URL=”http://cash4scrap.aquablueweb.com”]http://cash4scrap.aquablueweb.com[/URL][/B]

[B]The HTML:[/B]

[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>[/CODE]

[B]The Javascript:[/B]

[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>[/CODE]

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@FangNov 06.2010 — 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">
[/CODE]
Copy linkTweet thisAlerts:
@daebatauthorNov 06.2010 — Changed this and it didn't do anything.

[CODE]<img id="imap1" src="/image/blank.png" usemap="#map1" />[/CODE]
[CODE]<map id="map1" name="map1">[/CODE]
Copy linkTweet thisAlerts:
@daebatauthorNov 07.2010 — 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?
Copy linkTweet thisAlerts:
@Sterling_IsfineNov 07.2010 — 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?[/QUOTE]

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>
[/CODE]
×

Success!

Help @daebat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...