Anpassungen bei <area> durch Javascript werden nicht übernommen

[je]

Ich arbeite an einer browserbasierten Hilfe zu einem speziell entwickelten Programm in einem internem Netzwerk, welches überwiegend IE verwendet (mir persönlich steht IE6 zur Verfügung). Es kam der Vorschlag auch eine Grafik einzubauen bei der man die einzelnen Funktionen des Programms erklärt bekommt (zB durch klicken). Das habe funktioniert auch soweit.

Nun kam jedoch die Bitte zu versuchen, die Grafik auch skalierbar zu gestalten. Die Fenstergröße an sich lässt sich ohne Probleme ändern, jedoch ist das Bild ursprünglich immer wieder in die Ausgangsgröße zurückgesprungen. Damit meine ich, dass es größer als normal geladen wurde und dann auf die Originalgröße zurückgegangen ist. Das habe ich damit gelöst, dass ich dem Bild eine prozentuale Breite gegeben habe (da das Fenster genauso breit ist wie das Bild). Jedoch stimmen meine Koordinaten beim größeren Bild nicht mehr. In meiner Funktion wo sich die Werte ändern, gibt es auch eine Formel zum Umrechnen der Koordinaten. Diese stimmen auch, wie ich mir per alert (am Beispiel einer Koordinate) habe ausgeben lassen.

Im Endeffekt weiß ich nicht ob es an der Übergabe im Javascript liegt oder an etwas das im HTML Code steht. Ich hoffe das Problem an sich wurde treffend erklärt (auch wenn es etwas länger wurde).

Die Funktion:

function changeCoords(faktor)  
{  
  
  if (faktor!=0 && faktor!="" && faktor<=2 && faktor>=0.5)  
  {  
    for(var i=1; i<=100; i++)  
    {  
      var coord = document.getElementById(i).coords;  
      var eCoord= coord.split(",");  
      eCoord[0]=Math.round(eCoord[0] * faktor);  
      eCoord[1]=Math.round(eCoord[1] * faktor);  
      eCoord[2]=Math.round(eCoord[2] * faktor);  
      eCoord[3]=Math.round(eCoord[3] * faktor);  
      coord=eCoord[0]+","+eCoord[1]+","+eCoord[2]+","+eCoord[3];  
  
      //document.getElementById(i).coords=coord;  
      document.getElementById(i).setAttribute("coords", coord, 0);  
    }  
  
    var width=800*faktor;  
    var height=600*faktor;  
    window.resizeTo(width,height);  
    alert(document.getElementById('1').coords);  
  }  
  else  
  {  
    alert('Fehlermeldung');  
  }  
}

Definition der Koordinaten im HTML Teil:

  
<img id="bild" name="bild" src="./imgs/ubersicht.jpg" width="100%" usemap="#kspage">  
<map id="kspage" name="kspage">  
<area href="#" id="1"  class="interaktiv" shape="rect" coords="0,31,62,47" alt="Öffnet den Dialog zum Anlegen einer neuen Seite" onClick="javascript: alert('Öffnet den Dialog zum Anlegen einer neuen Seite');"/>  
<area href="#" id="2"  class="interaktiv" shape="rect" coords="62,31,124,47" alt="Öffnet den Dialog zum Laden einer Seite" onClick="javascript: alert('Öffnet den Dialog zum Laden einer Seite');" />  
<area href="#" id="3"  class="interaktiv" shape="rect" coords="124,31,187,47" alt="Öffnet den Dialog zum Ändern und Hinzufügen von Sekundärpublikationen" onClick="javascript: alert('Öffnet den Dialog zum Ändern und Hinzufügen von Sekundärpublikationen');" />  
  ...  
<area href="#" id="100"  class="interaktiv" shape="rect" coords="690,104,764,118" alt="Aktiviert die Ansicht für die Ebene 2" onClick="javascript: alert('Aktiviert die Ansicht für die Ebene 2');" />