Image Map dynamisch mit JS zuweisen

[Stefan Schmidhammer]

Hi Leute,

Ich habe folgendes Problem. Ich hab ein AJAX Request das mir XML liefert, die Node bei der ich das Problem hab sieht dabei so aus:

<imagehtml>
  <map name="map_imagemap">
    <area title="im 1" href="#" coords="207,444,207,422,229,422,229,444,207,444" shape="poly">
    <area title="im 2" href="#" coords="235,444,235,422,257,422,257,444,235,444" shape="poly">
    ....
    ..
  </map>
  <img src="115833326525161.png" usemap="#map_imagemap">
</imagehtml>

Ich füge den Inhalt dieser Node zwischen einem <div> ein. Das Problem das ich jetzt hab ist das weder FF noch IE7 irgendwas anzeigen.

Ich hab mir dann mal mir .innerHTML den Quelltext zwischen diesem <div> ausgeben lassen und es steht alles richtig drin, es wird nur nix angezeigt, weder Bild noch Imagemap.

Hab dann <img> direkt in die Seite geschrieben und nur das Attribut "src" ersetzt das hat für das Bild funktioniert.

Aber wenn ich <map> dynamisch eingefüge wendet der Browser es nicht auf das Bild an.

Ich hab mir wieder alles mit .innerHTML ausgeben lassen und das ganze in ner statischen HTML Seite gespeichert und da funktionierte alles.

Kann mit wer das verhalten bestätigen oder hab ich irgendwo einen Fehler im Code?

Falls gewünscht poste ich hier ein Beispiel, wollte aber erstmal sehen ob es an mir liegt.

MFG
Stefan

[Gernot Back]

Hallo Stefan,

Mit InnerHTML solltest du lieber nur Text austauschen und sobald dein Code darin weitere Elemente verschachtelt enthält, lieber mit dem Node-Objekt in Verbindung mit document.createElement().

Beachte auch, wenn du über JS Image-Elementen eine Imagemap zuweisen willst, dass du dies mit der Eigenschaft "useMap" (mit großem M als Binnenmajuskel) tun musst.

Gruß Gernot

[Stefan Schmidhammer]

Hi

Mit InnerHTML solltest du lieber nur Text austauschen und sobald dein Code darin weitere Elemente verschachtelt enthält, lieber mit dem Node-Objekt in Verbindung mit document.createElement().

Ja klar, das mach ich auch. Mit innerHTML schau ich mir dann nur an ob auch alles an der richtigen Stelle eingefügt wurde, sonst seh ich den veränderten DOM Baum nicht.
Die Node wird mit appendChild() eingefügt

Beachte auch, wenn du über JS Image-Elementen eine Imagemap zuweisen willst, dass du dies mit der Eigenschaft "useMap" (mit großem M als Binnenmajuskel) tun musst.

Ich hab jetzt immer setAttribute() verwendet, oder eben schon fix in den HTML Code reingeschrieben, ich werd das mal so ausprobieren

MFG
Stefan

[Detlef G.]

Hallo Stefan

Ja klar, das mach ich auch. Mit innerHTML schau ich mir dann nur an ob auch alles an der richtigen Stelle eingefügt wurde, sonst seh ich den veränderten DOM Baum nicht.
Die Node wird mit appendChild() eingefügt

Wie machst du das genau?

Ich hab jetzt immer setAttribute() verwendet, oder eben schon fix in den HTML Code reingeschrieben, ich werd das mal so ausprobieren

Bei vielen Attributen funktioniert die Form element.Attribut="Attribut" zuverlässiger als setAttribute().
Fix in den HTML Code reinschreiben kannst du beim einhängen in den DOM-Baum nicht. Dabei musst du jedes Element einzeln erzeugen und an der richtigen Stelle in den Baum hängen.
Manchmal (ich glaube mich zu errinnern, beim IE) kann es nötig sein, die Attribute erst zuzuweisen, wenn das Element bereits eingehangen ist, damit diese verwendet werden.

Auf Wiederlesen
Detlef