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');" />  

[LX]

Da Du nur rechteckige Areas hast, was hälst Du von der Idee, statt einer Map einfache Links zu nehmen, die Du mit style="display:block; position:absolute; top:y; left:x; width:w; height:h;" auf die richtige Position und Größe bringst (ein title-Tag ersetzt hierbei das alt-Tag).

Ganz abgesehen davon ist onclick="javascript:..." blödsinnig, da onclick bereits JavaScript ausführt und nicht auf einen zusätzlichen Event angewiesen ist.

Gruß, LX

[je]

Ganz abgesehen davon ist onclick="javascript:..." blödsinnig, da onclick bereits JavaScript ausführt und nicht auf einen zusätzlichen Event angewiesen ist.

Ich hatte gelesen, dass man vor JavaScript code das schreiben sollte und da ich das erste mal mit onclick gearbeitet hatte, war ich mir da nicht sicher.
Danke für den Hinweis.

Ansonsten habe ich auch gerade mein Problem gefunden. Es lag nicht an meinem Code, sondern dass ich den Faktor über ein Formular eingeben lasse und durch das Formular die Seite neugeladen wurde und damit meine geänderten Werte wieder überschrieben wurde.

Trotzdem danke für den anderen Tip. Werde den mir auch mal ansehen, für zukünftige Projekt der Art. Gibt jedenfalls massenhaft neue Denkanstöße.

Grüße,
JE