Changing Image and Image Map crashes IE (not firefox)!
I came across your forums here and it looked like a great place to get some help, and help is exactly what I need!
I have been struggling with this javascript that changes an image and its corresponding useMap.
For reference:
- All images are the same size and located in the same directory, except the main map image
- All images are preloaded (I did this just in case it was an image problem)
- The page works fine in Firefox, and fine in IE until it crashes
- http://www.forthecode.com/imagemap/untitled.htm
The Problem:
- When clicking on a state in the main image, the state image appears, if you then click on the "return to the overview" it returns to the overview image then promptly crashes IE within 1-2 seconds.
- This even happens in a completely blank page (no other content)
Exceptions:
- Clicking on the state Mississippi does not cause this problem (you can go back and forth with Mississippi without problem)
- Tennessee, Ohio, Arkansas, Illonois crash as soon as their state map comes up!
The Javascript function itself:
Code:
<script language="Javascript">
function changemap(vari){
var vari;
var stoptime;
if(vari=="regionview"){
document.regionmap.src = "/images/branchmap2.jpg";
stoptime = setTimeout( function changemap1(){ document.regionmap.useMap="#Map"; clearTimeout(stoptime);} , 300);
}
else{
document.regionmap.src = "/images/states/" + vari + ".jpg";
stoptime = setTimeout( function changemap2(){ document.regionmap.useMap="#"+vari; clearTimeout(stoptime);} , 300);
}
}
</script>
I'm not sure, I've not seen this behavior before, but it looks like it could be a problem with something trying to kill itself. Circles are usually bad in code.
The circle I see is that stoptime is a variable that attempts to clear itself when it's timeout ends. Basically, it's still executing it's code block when it is told to clear itself, but it's already reached the end of it's timeout!
It's probably just getting confused, and there's some order of execution in the JScript engine in IE that's resulting in a null reference.
Just drop the clearTimeout(stoptime) from your functions. They are not needed because once the timeout ends, it's already cleared. Timeouts are one shot deals, as opposed to intervals, which need to be cleared to make them stop.
I have tried that, and I should have mentioned that in my previous post. Allow me to go over the changes I have made:
I have tried without the clearTimeout() function: (to no avail)
Code:
<script language="Javascript">
function changemap(vari){
var vari;
if(vari=="regionview"){
document.regionmap.src = "/images/branchmap2.jpg";
stoptime = setTimeout( function changemap1(){ document.regionmap.useMap="#Map";} , 300);
}
else{
document.regionmap.src = "/images/states/" + vari + ".jpg";
stoptime = setTimeout( function changemap2(){ document.regionmap.useMap="#"+vari;} , 300);
}
}
</script>
I have tried commenting out everything except the setTimeout, but it still errors (so I believe it is in the setTimeout).
Code:
<script language="Javascript">
function changemap(vari){
var vari;
if(vari=="regionview"){
//document.regionmap.src = "/images/branchmap2.jpg";
setTimeout( function changemap1(){ document.regionmap.useMap="#Map";} , 300);
}
else{
//document.regionmap.src = "/images/states/" + vari + ".jpg";
setTimeout( function changemap2(){ document.regionmap.useMap="#"+vari;} , 300);
}
}
</script>
What really perplexes me is that the function works perfectly fine with the state Mississippi (so for a long shot i thought the length of the name might help, and i tried changing names of images and maps- but also to no avail)
Let me attack this from another angle. Why are you using a timeout to change the map? It doesn't seem necessary.
Have you tried to see if just the line (Or it's variable sister line):
document.regionmap.useMap="#Map";
crash IE? Perhaps IE doesn't like the way your changing the useMap. Try without the timeouts and see what happens. Maybe you don't even need them (I can't see their use from visiting your site)
However, the timeout was put in place to prevent a "click-through". Somehow when I click on a region without the timeout (i.e. document.regionmap.useMap="#Map"; ) then the click acts like a double click and goes past the next image to some branch page.
So it doesn't crash IE but it doesnt stop at the next image.
Removing the function names also doesnt seem to change anything. (I have removed them on the demo link for testing).
I thought perhaps it was something to do with the map tags (considering that Mississippi works fine, the others do not...). But I have not been able to see any differences.
The answer is that what you need to do is KILL the click event once it's been handled. This is done in different ways on different browsers. If the click-through problem is only on IE, add this to your changeMap before you actually change it:
window.event.cancelBubble = true;
See if that stops the click through. Remove the setTimeout calls.
Above is one version I tried and the demo page has another, both to no avail. That leads me to believe that the Javascript may not be the culprit.. could the image maps be causing problems like this? -- I will try changing them to see if it makes a different.
Well, clearly we can say with confidence that whether or not the setTimeouts were crashing IE, something ELSE is DEFINITELY crashing IE.
It definitely seems possible that the image maps could be breaking IE.
You said that each image is the same size right?
Well, try putting alerts after every statement with numbers from 1 to whatever, and see which line is the one that kills it.
Once we know that, we can take a better guess as to why this is crashing. Also, try checking out MSDN for known crash bugs in javascript relating to image maps and if you don't find anything there, you might want to report a bug to them.
I apologize for any misleadings on the last post - the images themselves are still the same (and all of them are the same size).
I meant that I changed the useMap's to the same as Mississippi's and it worked fine, but as soon as I tried bringing in the old hotspots it started crashing.
My goal now is to re-plot each non working image map until I can get it to work.
Using the alert() method after each line of javascript code showed that them problem only occurs after IE swaps to the new useMap (and again, only on certain states - arkansas, ohio, illonois, tennessee).
I will post any further information as I get it. Again thank you for the suggestions.
Get the dimensions of your image, and create a map that CLEARLY fits within the bounds of the image and a map that CLEARLY does NOT fit.
Then swap them. If you crash, that's most likely the problem. Very interesting, and probably should be reported to the IE dev team. It shouldn't be crashing.
I have spent countless hours trying to fix this, but to no avail.
My final solution (which works, but disgusts me) = refresh the page each click and load the next map.
However, I must confess, I never give up on a bug like this-- there has to be a way to use javascript to load these images and maps. I will keep trying (but my project has to be finished in a timely manner).
About one year later and I am searching the whole web for a solution for the identical problem. It seems that IE does not handle the modification of the DOM correctly when manipulating image maps that are dispatcher of the event that is handled. It might be some kind of low level null pointer exception. The area tag dispatches an event. the event is caught and the js starts to manipulate the image map including the area tags. The script finishes fine, but when returning to the normal web site IE crashes. Maybe the event handling cannot return to the bubbling phase correctly? And why does it sometimes work then?
Interesting: The same script works without any problems when the event is fired by an element other than an area tag.
Before you post, read our: 
)
