Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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>
    The image tag and image maps:
    Code:
    <img src="images/branchmap2.jpg" name="regionmap" usemap="#Map" border="0"> 
    <map name="Map">
      <area shape="rect" coords="144,14,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana"> 
      <area shape="poly" coords="139,91,137,104,132,108,132,115,128,118,160,110,167,109,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
      <area shape="poly" coords="230,138,123,139,121,131,127,122,140,117,153,115,170,107,191,90,194,85,202,87,213,90,221,91,225,90,232,92,232,100,238,107,242,114,245,119" href="#" onClick="javascript: changemap('kentucky');" alt="Kentucky" title="Kentucky">
      <area shape="poly" coords="153,177,143,244,144,280,127,287,115,286,113,272,83,271,78,264,86,249,93,239,89,228,88,212,90,202,97,192,105,178" href="#" onMouseUp="javascript: changemap('mississippi');"  alt="Mississippi" title="Mississippi">
      <area shape="poly" coords="87,226,17,227,16,212,7,212,3,128,108,130,107,142,113,142,120,128,121,131,121,141" href="#" onClick="javascript: changemap('arkansas');"  alt="Arkansas" title="Arkansas">
      <area shape="poly" coords="246,118,255,98,272,87,284,64,283,11,265,17,258,25,241,31,217,18,187,18,190,81,218,90,224,87,232,92,235,100" href="#" onClick="javascript: changemap('ohio');"   alt="Ohio" title="Ohio">
      <area shape="poly" coords="124,116,128,121,120,128,111,140,109,129,23,127,21,70,15,60,2,33,74,33,79,39,78,51,95,76,103,77,100,87,101,95,108,103,113,111,114,118" href="#" onClick="javascript: changemap('missouri');"   alt="Missouri" title="Missouri">
      <area shape="poly" coords="129,117,131,109,136,104,138,91,144,80,142,19,137,4,99,3,102,14,94,22,87,22,90,34,81,45,78,50,94,75,105,77,103,88,104,97,112,107,116,114" href="#" onClick="javascript: changemap('illonois');"   alt="Illonois" title="Illonois">
      <area shape="poly" coords="204,177,109,176,123,139,249,139" href="#" onMouseUp="javascript: changemap('tennessee');"   alt="Tennessee" title="Tennessee">
      </map>
    <map name="arkansas"> 
      <area shape="rect" coords="240,135,284,163" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
      <area shape="circle" coords="209,143,7" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
      <area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
      </map>
    <map name="mississippi"> 
        <area shape="rect" coords="20,177,64,191" href="/branches/jackson.php" alt="Jackson" title="Jackson">
        <area shape="circle" coords="103,183,8" href="/branches/jackson.php" alt="Jackson" title="Jackson">
        <area shape="rect" coords="217,198,277,214" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
        <area shape="circle" coords="175,208,7" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
        <area shape="rect" coords="222,96,279,111" href="/branches/columbus.php" alt="Columbus" title="Columbus">
        <area shape="circle" coords="195,106,8" href="/branches/columbus.php" alt="Columbus" title="Columbus">
        <area shape="rect" coords="222,71,261,85" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
        <area shape="circle" coords="174,84,6" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
    	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
      </map>
    <map name="missouri"> 
        <area shape="rect" coords="195,262,243,275" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
        <area shape="circle" coords="216,199,7" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
        <area shape="rect" coords="247,173,280,186" href="/branches/ozora.php" alt="Ozora" title="Ozora">
        <area shape="circle" coords="206,182,6" href="/branches/ozora.php" alt="Ozora" title="Ozora">
        <area shape="rect" coords="232,158,278,169" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
        <area shape="circle" coords="194,165,7" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
        <area shape="rect" coords="228,128,275,142" href="/branches/stlouis.php" alt="St. Louis" title="St. Louis">
        <area shape="circle" coords="206,137,8" href="/branches/stlouis.php" alt="St Louis" title="St Louis">
        <area shape="rect" coords="198,97,258,112" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
        <area shape="circle" coords="182,130,6" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
    	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
      </map>
    <map name="kentucky"> 
        <area shape="rect" coords="24,218,72,231" href="/branches/paducah.php" alt="Paducah" title="Paducah">
        <area shape="circle" coords="46,190,6" href="/branches/paducah.php" alt="Paducah" title="Paducah">
        <area shape="rect" coords="35,127,95,141" href="/branches/henderson.php" alt="Henderson" title="Henderson">
        <area shape="circle" coords="63,174,7" href="/branches/henderson.php" alt="Henderson" title="Henderson">
        <area shape="rect" coords="94,218,175,232" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
        <area shape="circle" coords="127,188,6" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
        <area shape="rect" coords="108,75,159,90" href="/branches/louisville.php" alt="Louisville" title="Louisville">
        <area shape="circle" coords="144,130,7" href="/branches/louisville.php" alt="Louisville" title="Louisville">
        <area shape="rect" coords="179,75,232,89" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
        <area shape="circle" coords="193,127,8" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
    	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
      </map>
    <map name="indiana"> 
        <area shape="rect" coords="18,199,73,213" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
        <area shape="circle" coords="110,204,6" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
        <area shape="rect" coords="210,180,273,193" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
        <area shape="circle" coords="187,186,6" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
        <area shape="rect" coords="211,117,276,132" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
        <area shape="circle" coords="159,124,5" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
        <area shape="rect" coords="211,101,250,113" href="/branches/muncie.php" alt="Muncie" title="Muncie">
        <area shape="circle" coords="178,116,7" href="/branches/muncie.php" alt="Muncie" title="Muncie">
        <area shape="rect" coords="212,46,257,60" href="/branches/fremont.php" alt="Fremont" title="Fremont">
        <area shape="circle" coords="185,55,7" href="/branches/fremont.php" alt="Fremont" title="Fremont">
        <area shape="rect" coords="36,73,92,86" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
        <area shape="circle" coords="179,79,5" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
        <area shape="rect" coords="36,109,87,121" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
        <area shape="circle" coords="138,113,6" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
    	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
      </map>
    <map name="illonois"> 
        <area shape="rect" coords="28,184,89,197" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
        <area shape="circle" coords="126,192,6" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
        <area shape="circle" coords="148,153,5" href="/branches/effingham.php" alt="Effingham" title="Effingham">
        <area shape="rect" coords="218,146,273,159" href="/branches/effingham.php" alt="Effingham" title="Effingham">
        <area shape="rect" coords="219,120,260,134" href="/branches/urbana.php" alt="Urbana" title="Urbana">
        <area shape="circle" coords="164,130,6" href="/branches/urbana.php" alt="Urbana" title="Urbana">
    	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
      </map>
    <map name="tennessee"> 
        <area shape="rect" coords="0,199,49,213" href="/branches/memphis.php" alt="Memphis" title="Memphis">
        <area shape="circle" coords="25,170,7" href="/branches/memphis.php" alt="Memphis" title="Memphis">
        <area shape="rect" coords="41,80,90,94" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
        <area shape="circle" coords="64,149,8" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
    	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
      </map>
    <map name="ohio"> 
        <area shape="rect" coords="49,221,105,237" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
        <area shape="circle" coords="74,162,7" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
        <area shape="rect" coords="6,138,46,151" href="/branches/dayton.php" alt="Dayton" title="Dayton">
        <area shape="circle" coords="91,146,6" href="/branches/dayton.php" alt="Dayton" title="Dayton">
    	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
      </map>
    This is exactly how it is in my html files. I really appreciate any input, suggestions or comments you can give me.

    Thanks in advance!
    Last edited by cabbott; 03-07-2006 at 07:46 PM.

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the reply Beagle.

    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)

    Reference:

    http://www.forthecode.com/imagemap/untitled.htm

    Please use that link for a demonstration of the problem (with IE).

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Try setting the timeout without naming the function:

    setTimeout( function(){ document.regionmap.useMap="#Map";} , 300);

    But honestly, I'm not sure.

    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)

  • #5
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the great suggestions!

    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.

  • #6
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Ahhhh, I see why you would want to use them.

    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.

  • #7
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Again thank you for your quick replies - this has been the best response out of the different channels I have used!

    I tried the suggestion you gave (a particular feature I did not know about!).

    Unfortunately it did not stop the click-through or the crashing (even with the setTimeout() gone )

    Code:
    <script language="Javascript">
    	function changemap(vari){
    		var vari;
    		window.event.cancelBubble = true;
    		if(vari=="regionview"){
                            window.event.cancelBubble = true;
    			document.regionmap.src = "/images/branchmap2.jpg";
    			document.regionmap.useMap="#Map";
    			}
    		else{
    			window.event.cancelBubble = true;
    			document.regionmap.src = "/images/states/" + vari + ".jpg";
    			document.regionmap.useMap="#"+vari;
    			}
    	}
    </script>
    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.

  • #8
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    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.

    Get back to us on which line is the culprit.

  • #9
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quite strange-- I replace all the imag maps with the Mississippi map and try it (after renaming them to the right state).

    Result: They all work properly!

    Copy one of the old state image maps back into the map lineup - then that state starts causing errors again.

    Replace it again with the Mississippi map- works.

    Try leaving the image map blank (no hotspots), and it crashes...

    Try leaving only one line, and.. surprise it crashes...

    I will let you know if I come across any concrete evidence for why it is giving me this problem. I do appreciate any further suggestions!

  • #10
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    1) verify your image dimensions are identical

    2) try this on a slow machine across a slow internet connection. Perhaps latency brings it out.

    3) check the value of vari for possible misspellings.

    That's all i got for now.

    very interested to find out the answer.

  • #11
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Here's a test to run.

    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.

  • #13
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

    Why, oh why must it come to this =(

  • #14
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Hrrrm, well that sucks.

    Did you try the test in my last post? What did you find? Any closer to figuring out why the mississippi map works but the others don't?

    I really do feel like it has something to do with the coordinates in the map somehow.

    But, of course, a workaround when there's a time requirement is something we all have to come to terms with sometimes

    Good luck, and if you want to, we can keep plugging away at this.

  • #15
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Confirmation

    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.

    If someone knows an answer, please let me know!

    Cheers
    Sven


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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