« New Site
Life at Yahoo »

Crash IE 6/7

I’ve posted this in the past on my old blog, but I thought I would bring it up again since it still works. Internet Explorer has a bug which allows you to crash the browser. The bug occurs when IE tries to bring focus to an imagemap after you’ve switched it with another imagemap. It appears to reference the # of the area element which it had focused on before. If the new map has less than that #, there is no corresponding element to focus on and the browser crashes.

Here is the reproduce code:


<script type="text/javascript">
var crashMe = function () { document.getElementById("test").useMap = "#map2"; };
</script>
<img src="http://files.radixpub.com/crash.gif" id="test" usemap="#map1" />
<map name="map1">
<area href="javascript:return void;" shape="rect" coords="1,1,1,1" />
<area href="javascript:crashMe();" shape="rect" coords="1,1,300,300" />
</map>
<map name="map2">
<area href="javascript:return void;" shape="rect" coords="1,1,1,1" />
</map>

Link to file with code above

This entry was posted on Friday, August 10th, 2007 at 9:48 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

3 Responses to “Crash IE 6/7”

  1. sarxos Says:
    September 27th, 2007 at 7:30 am

    Soory posted without tags…

    I’ve notice this bug also. If somebody want to workaround it just use SPAN tag with IMG tag inside and in change map function assign innerHTML attribute with String <IMG src=’..’ usemap=’#someNewmap’>

  2. JasonG Says:
    September 27th, 2007 at 5:35 pm

    I’ve actually stopped using img maps altogether. There are still certain cases where they can be useful but you can also just place normal links over them by using absolute positioning.

  3. nbfruit Says:
    December 21st, 2007 at 3:41 am

    Just some clarification re. my understanding of this issue:

    The problem occurs when you try to dynamically create poly areas which have different numbers of co-ordinates. Basically, if you have 2 poly areas, and the second one has fewer co-ordinates than the first, the 2nd area will crash IE6/7.

    The fix is to create your IMG tag using innerHTML rather than DOM element properties.

    ie this *won’t* work

    var map_image = document.getElementById(’map’);
    map_image.src = ‘images/maps/’ + map_file;
    map_image.isMap = ‘ismap’;
    map_image.useMap = ‘#layer’ + parent_level_id + ‘_map’;

    Whereas if you put your IMG tag inside a SPAN, like so:

    and update it like this:

    var map_image_span = document.getElementById(’map_image_span’);
    map_image_span.innerHTML = “”;

    You should be fine.

Leave a Reply