[JS] Dynamisch image map aanpassen - Softwareontwikkeling

dinsdag 21 maart 2006 14:52

Acties:

Topicstarter

Hoi iedereen

.

Ik ben bezig om een soort van brainstorm applicatie te maken. Hier kun je zeg maar woordwebben mee creëren. Omdat ieder plaatje natuurlijk anders is veranderen ook de click areas van het plaatje. Nu heb ik een mooie AJAX tussenoplossing gebouwd dit dit naadloos verwerkt. Werkt allemaal prima onder Firefox, maar niet onder Internet Explorer.

Na wat onderzoek ligt het bij het dynamisch veranderen van de image maps. In IE genereert de 'applicatie' en harde crash die op iedere pc in de buurt te repeteren is.

Ik heb hier een voorbeeld online staan:
http://zeroxcool.net/got/iecrash.html

Zoals je ziet werkt dit onder FF prima, maar onder IE loopt hij vast nadat je dit 'clickpath' gevolgd hebt: 'forum' => 'forum'.

De code is ook op die pagina te vinden maar ik heb de belangrijkste stukken even hier neer gezet:

Java:

<html>
<head>
<script type="text/javascript">
var map = null;
var items = new Array();

/* forum - GoT - tweakers.net */
items[1] = new Array();
items[1][0] = new Array();
items[1][0]["x1"] = 419;
items[1][0]["y1"] = 283;
items[1][0]["x2"] = 481;
items[1][0]["y2"] = 316;
items[1][0]["alt"] = "forum";
items[1][0]["url"] = 2;

items[1][1] = new Array();
items[1][1]["x1"] = 93;
items[1][1]["y1"] = 284;
items[1][1]["x2"] = 207;
items[1][1]["y2"] = 316;
items[1][1]["alt"] = "tweakers.net";
items[1][1]["url"] = 3;

items[1][2] = new Array();
items[1][2]["x1"] = 267;
items[1][2]["y1"] = 280;
items[1][2]["x2"] = 333;
items[1][2]["y2"] = 320;
items[1][2]["alt"] = "GoT";
items[1][2]["url"] = 1;

function clearMap() {
    for (var i = map.areas.length - 1; i >= 0; i--) {
        map.removeChild(map.areas[i]);
    }
    document.getElementById('mapcontainer').removeChild(map);
}

function makeMap(index) {
    if (!items[index]) return;
    if (map != null) clearMap();
    map = document.createElement("map");
    map.id = "map"+index;
    map.name = "map"+index;
    document.getElementById('mapcontainer').appendChild(map);

    for (var i = 0; i < items[index].length; i++) {
        addArea(map, i, items[index][i]);
    }

    document.getElementById('mapimg').useMap = "#map"+index;
    document.getElementById('mapimg').src = 'item'+index+'.png';
}

function addArea(map, index, node) {
    var a, x1, x2, y1, y2, url, alt;
    
    a = document.createElement("area");
    
    x1 = node["x1"];
    y1 = node["y1"];
    x2 = node["x2"];
    y2 = node["y2"];
    url = node["url"];
    alt = node["alt"];
    
    a.shape = "rectangle";
    a.coords = x1+","+y1+","+x2+","+y2;
    a.alt = "Bekijk alles onder '"+alt+"' een niveau dieper";
    a.title = a.alt;
    if (url == null) {
        a.href = "javascript:makeMap("+previous+")";
    } else {
        a.href = "javascript:makeMap("+url+")";
    }
    map.appendChild(a);
}

</script>
</head>
<body>

<div id="mapcontainer"></div>

[img]"item1.png"[/img]

<script type="text/javascript">
makeMap(1);
</script>

</body>
</html>

Kortweg: er wordt een nieuwe map aangemaakt (makeMap(1)). Deze map krijgt als members in eerste instantie drie areas (deze gegevens komen uit een vooraf vastgezette array (zie de URL)). Die areas worden aan de map toegevoegd mbv. de appendChild functie. De vorige map is daarvoor al leeg gemaakt.

Wie zou mij kunnen vertellen wat er mis gaat in IE?

[ Voor 28% gewijzigd door zeroxcool op 21-03-2006 14:52 . Reden: highlighting ]

zeroxcool.net - curity.eu

dinsdag 21 maart 2006 14:53

Acties:

Sjoerd

bij mij crashed hij in FF EN IE

Modelbouw - Alles over modelbouw, van RC tot diorama

dinsdag 21 maart 2006 14:59

Acties:

zeroxcool

Topicstarter

langezwieper schreef op dinsdag 21 maart 2006 @ 14:53:
bij mij crashed hij in FF EN IE

Ah ok, nieuw punt dus (ik heb hier FF 1.5.0.1). Ik gok dat je FF 1.0 hebt.

Des te reden meer om tot een oplossing te komen

.

zeroxcool.net - curity.eu

dinsdag 21 maart 2006 15:42

Acties:

crisp

Devver

Pixelated

Het gaat goed als ik in plaats van de useMap en de src van de bestaande image aanpassen een geheel nieuw image-element aanmaak.

Intentionally left blank

dinsdag 21 maart 2006 15:49

Acties:

zeroxcool

Topicstarter

crisp schreef op dinsdag 21 maart 2006 @ 15:42:
Het gaat goed als ik in plaats van de useMap en de src van de bestaande image aanpassen een geheel nieuw image-element aanmaak.

Thanks! That did the trick!

De aanpassing t.o.v. van vorige code:

Java:

<script type="text/javascript">

function makeMap(index) {
    if (!items[index]) return;
    if (map != null) clearMap();
    map = document.createElement("map");
    map.id = "map"+index;
    map.name = "map"+index;
    document.getElementById('mapcontainer').appendChild(map);

    for (var i = 0; i < items[index].length; i++) {
        addArea(map, i, items[index][i]);
    }

    document.getElementById('imgcontainer').removeChild(document.getElementById('mapimg'));
    
    mapimg = document.createElement("img");
    mapimg.useMap = "#map"+index;
    mapimg.src = "item"+index+".png";
    mapimg.border = 0;
    mapimg.id = "mapimg";
    document.getElementById('imgcontainer').appendChild(mapimg);
}
</script>

<div id="mapcontainer"></div>

<div id="imgcontainer">[img]"item1.png"[/img]</div>

Crisp, heb je misschien ook een verklaring? Is het een bug? Want in principe klopte de code 'gewoon', niet?

[ Voor 70% gewijzigd door zeroxcool op 21-03-2006 15:51 ]

zeroxcool.net - curity.eu

dinsdag 21 maart 2006 16:00

Acties:

crisp

Devver

Pixelated

ZeRoXcOoL schreef op dinsdag 21 maart 2006 @ 15:49:
[...]
Crisp, heb je misschien ook een verklaring? Is het een bug? Want in principe klopte de code 'gewoon', niet?

Ja, dat is gewoon een vieze vette bug. De laatste IE7 beta 2 preview built crashed er ook op overigens...

Intentionally left blank

dinsdag 21 maart 2006 16:03

Acties:

zeroxcool

Topicstarter

crisp schreef op dinsdag 21 maart 2006 @ 16:00:
[...]
Ja, dat is gewoon een vieze vette bug. De laatste IE7 beta 2 preview built crashed er ook op overigens...

Als ik je zo hoor, is hij inmiddels ook bekend bij de projecten?

[ Voor 4% gewijzigd door zeroxcool op 21-03-2006 16:04 ]

zeroxcool.net - curity.eu

dinsdag 21 maart 2006 16:05

Acties:

crisp

Devver

Pixelated

ZeRoXcOoL schreef op dinsdag 21 maart 2006 @ 16:03:
[...]

Als ik je zo hoor, is hij inmiddels ook bekend bij de projecten?

Nee, niet dat ik weet. Feit is gewoon dat ik me nergens meer over verbaas bij het stuk schroot dat IE heet

Intentionally left blank

dinsdag 21 maart 2006 16:13

Acties:

zeroxcool

Topicstarter

crisp schreef op dinsdag 21 maart 2006 @ 16:05:
[...]

Nee, niet dat ik weet. Feit is gewoon dat ik me nergens meer over verbaas bij het stuk schroot dat IE heet

Ssssst

. Maar het gaat dus ook in FF fout zoals langezwieper aangeeft...

zeroxcool.net - curity.eu

dinsdag 21 maart 2006 16:18

Acties:

crisp

Devver

Pixelated

ZeRoXcOoL schreef op dinsdag 21 maart 2006 @ 16:13:
[...]

Ssssst . Maar het gaat dus ook in FF fout zoals langezwieper aangeeft...

tsja, maar Ff 1.0 is ook bejaard

Intentionally left blank