Image maps/areas - Unterschiede IE / FF

[bis]

Guten Tag,

derzeit habe ich die große Freude, eine in FF fertige JS-Anwendung (Ext JS) in IE testen und fixen zu dürfen. Leider bin ich kein Html-Experte.

Darin gibt es haufenweise Image Maps, die in FF bestens laufen. Der Html code wird aus Daten in JS im Client erstellt.

Leider läuft das überhaupt nicht in IE 7. Es gibt keine Änderung des Cursors, also auch keinen Click-Event. In der Developer Toolbar werden die Map/Area Elemente nicht gefunden (kein Ergebnis bei der Suche, keine Maps und Areas bei DOM Inspect).

Hat jemand eine Idee, was der Grund sein könnte? Ich frage nach ca. 8 Std Suche im Netz und mehrfachem erfolglosem Trial and Error.

Vielen Dank im Voraus

Hier das Html mit Map/Area, das in FF bestens funzt:
(Tip/UnTip von Walter Zorn macht die ToolTips)

<div>
<map name='clickables'>
<area shape='rect' coords='50,168,90,183' href="javascript:cl('1')" title='Clickable link' target='_self' alt=' ' onmouseover="Tip('Clickable link');" onmouseout="UnTip();" />
<area shape='rect' coords='50,184,90,199' href="javascript:cl('2')" title='Clickable link' target='_self' alt=' ' onmouseover="Tip('Clickable link');" onmouseout="UnTip();" />
<area shape='rect' coords='50,200,90,215' href="javascript:cl('3')" title='Clickable link' target='_self' alt=' ' onmouseover="Tip('Clickable link');" onmouseout="UnTip();" />
</map>
</div>

Anmerkung: Auf w3schools habe ich die Anforderung gefunden, die area tags mit "/>" abzuschließen. Das ist aber falsch, denn das läuft dann weder in IE7 noch in FF. Diese Aussage ist falsch. Es läuft in FF mit und ohne "/".

20:55 Änderung:
Ich habe meinen blöden Fehler in ("#clickables") so geändert, wie es im Code wirklich läuft, also ohne Raute (siehe unten). Und ferner </map> hinzugefügt und den End-Tag auf "/>" geändert. Ebenfalls siehe unten.

So, wie der Code jetzt ist, läuft es in FF, nicht aber in IE7. Mehr unten.

 

[ein schlauer]

Aber map solltest du schliessen

 

[bis]

Aber map solltest du schliessen

Danke für den Hinweis, aber in der Praxis ist das definitiv gegeben. Ich habe nur beim Copy/Paste den Fehler gemacht, das schließende "</map>" nicht zu kopieren. Die ganze Area-Liste ist wesentlich länger.

Das kann's also nicht sein. Dennoch danke!

 

[ein schlauer]

und was sollen wir deiner Meinung nun tun? Der IE hat in allen Versionen keine Probleme mit dem onclick Event bei Imagemaps (ok - bei der 3'er weiß ich das nicht), ohne ein konkretes Beispiel was nicht funktioniert, können wir dir nicht helfen.

 

[bis]

und was sollen wir deiner Meinung nun tun? Der IE hat in allen Versionen keine Probleme mit dem onclick Event bei Imagemaps (ok - bei der 3'er weiß ich das nicht), ohne ein konkretes Beispiel was nicht funktioniert, können wir dir nicht helfen.

a) Siehe oben: Hat jemand eine Idee, was der Grund sein könnte?
b) Nur IE 7 war genannt. Alles davor interessiert mich nicht.

Theoretisch ist der Code richtig. Praktisch funzt er nur in IE nicht.

Vielleicht hat jemand hier ein gleiches, ähnliches oder gar das selbe Problem gehabt.

 

[ein schlauer]

Und die Raute im Namen ist auch ein Kopierfehler?

 

[tsseh]

ich sehe auch keinen click-handler

 

[Albu]

ich sehe auch keinen click-handler

Und ich kein konkretes Beispiel, dass im Firefox funktioniert und im IE nicht. Man könnte zwar versuchen Code sinnvoll zu ergänzen, aber da nur eine theoretische Richtigkeit vorgegeben wurde, ist das schwierig.
Und da die Theorie hier generell variiert, wird das gleich noch schwieriger.
Die Verschleierung durch das Generieren des Codes durch Javascript dürfte auch nicht sonderlich zur Verbesserung der Gesamtsituation beitragen.

Ein Beispiel zum Anklicken oder Copy&Paste wäre da wesentlich hilfreicher.

 

[bis]

Und die Raute im Namen ist auch ein Kopierfehler?

Nein, sondern meine Schlampigkeit: Ich hatte den kopierten Code aus einem der Trial and Error-Versuche genommen und nicht komplett auf das Original zurück gesetzt. Pardon!

Ich habe den Code oben so korrigiert, wie er in FF funktioniert. Tut mir leid, zwei blöde Fehler in einem Beispiel, scheint nicht mein Tag zu sein.

 

[bis]

Mittlerweile habe ich ferner folgendes festgestellt:

1) Beim Setzen der Map im Image erfordert FF 3.5 zwingen die Höcker-Schreibweise "useMap". ("usemap" funktioniert NICHT). Die kleine Schreibweise führt allerdings auch bei IE7 nicht zum Erfolg. Der in FF funktionieren Code lautet so:

var imageObj = document.createElement('img');
imageObj.src = this.getCurrentPageImageFileName();	
imageObj.id = cfg.nameForImageObjHolderForTabNr(aTabNr);
/*Note that the CSS MUST contain this line { -ms-interpolation-mode:bicubic }
so that the images are scaled correctly in IE and Opera*/
//Set name of map in HTML with click coordinates
//FF requires useMap (usemap fails)
imageObj.[B]useMap[/B] = cfg.nameForClickablesUseMap();		// name of map data area in HTML
this.tabPageImagePanelObj = imageObj;

Anmerkung: Beim Skalieren gibt's übrigens noch ein anderes Problem: Ich bin mir ziemlich sicher, daß die Relation von Höhe und Breite bei IE anders berechnet wird als in FF. Boxen, die um die Areas gemalt werden, passen in FF, sind aber um einige Pixel in IE verschoben. Dazu komme ich später noch.

2) Bisher hatte ich die Area-Deklarationen NICHT mit "/>" abgeschlossen, sondern nur mit ">". Das wurde von FF 3.5 dennoch verarbeitet. Die Schreibweise "/>" führt allerdings auch bei IE7 auch nicht zum Erfolg. FF erkennt beides (mit und ohne "/").

Den Grund, warum IE die maps/areas überhaupt nicht erkennt, habe ich noch nicht finden können. Ich werde jetzt mal "onclick" einzufügen, obwohl das für FF nicht nötig ist. Es geht auch nur mit dem "href".

Und ich kein konkretes Beispiel, dass im Firefox funktioniert und im IE nicht.

Das scheint richtig zu sein: Die Beispiele, die ich gesehen und verwendet habe, laufen in beiden Browsern identisch.

Die Verschleierung durch das Generieren des Codes durch Javascript dürfte auch nicht sonderlich zur Verbesserung der Gesamtsituation beitragen.

Na ja, das ist die ganze Natur der Applikation: nur Daten (derzeit aus ASCII, im nächsten Release vom Applikations-Server) übertragen und im Client in JS so aufbereiten, wie von den Browsern benötigt. Das ist viel schlanker und außerdem kommen die meisten dieser Daten aus einer DB oder aus Quellen, die sowieso kein Html sind.

 

[bis]

ich sehe auch keinen click-handler

Danke für den Tip: Ich werde jetzt mal "onclick" einzufügen, obwohl das für FF nicht nötig ist. Es geht in FF auch nur mit dem "href".

 

[tsseh]

Danke für den Tip: Ich werde jetzt mal "onclick" einzufügen, obwohl das für FF nicht nötig ist. Es geht in FF auch nur mit dem "href".

das dürfte auch im ie gehen, nur gibt es keinen grund es nicht richtig zu machen.
ausserdem hast du von cklick-event geschrieben.
was ist eigentlich so schwer, daraus mal ein minimal-bsp. zu mach?

 

[Albu]

Na ja, das ist die ganze Natur der Applikation: nur Daten (derzeit aus ASCII, im nächsten Release vom Applikations-Server) übertragen und im Client in JS so aufbereiten, wie von den Browsern benötigt. Das ist viel schlanker und außerdem kommen die meisten dieser Daten aus einer DB oder aus Quellen, die sowieso kein Html sind.

Das glaube ich Dir und habe ich mir auch schon gedacht, es erschwert eben die Fehlersuche.

 

[bis]

das dürfte auch im ie gehen, nur gibt es keinen grund es nicht richtig zu machen.
ausserdem hast du von cklick-event geschrieben.

Ähm, verstehe ich richtig, daß Du "onclick" meinst? Oder was sonst?

Nochmals: In FF geht's ohne, ich versuche es in IE jetzt mit. Dauert aber etwas, weil...siehe unten. Muß in "ziemlich o-o" JS eingebaut werden.

was ist eigentlich so schwer, daraus mal ein minimal-bsp. zu mach?

Siehe meine Erklärung zur Web-App. Es gibt keine Html-Seiten mit diesen Daten. Warum auch?! Und viele Daten sind abhängig von Situationen und diversen Settings.

 

[tsseh]

Ähm, verstehe ich richtig, daß Du "onclick" meinst? Oder was sonst?

ja

Nochmals: In FF geht's ohne

im ie auch, nur wenn du in js auf einen click reagieren willst, warum dann nicht auch das entsprechende event nutzen, sondern ein pseudo-protokoll?

Siehe meine Erklärung zur Web-App. Es gibt keine Html-Seiten mit diesen Daten. Warum auch?! Und viele Daten sind abhängig von Situationen und diversen Settings.

was hat das mit einem beispiel zu tun? du wirst doch ein reproduzierbares beispiel hinbekommen?

 

[bis]

was hat das mit einem beispiel zu tun? du wirst doch ein reproduzierbares beispiel hinbekommen?

Das läuft im Moment nur im LAN und ferner müßte man sich dann in relativ umfangreichen Code einarbeiten (Teile aus derzeit ca. 15K Lines inkl. Doku), bräuchte also reichlich Erklärungen. Und es ist fast alles mit Joose gemacht, also ziemlich "hübsch" o-o und damit sehr ineinander verschachtelt.

Das kann ich wohl kaum von einem Forum erwarten.

 

[Albu]

Dauert aber etwas, weil...siehe unten. Muß in "ziemlich o-o" JS eingebaut werden.

Das erstaunt mich jetzt etwas...

Siehe meine Erklärung zur Web-App. Es gibt keine Html-Seiten mit diesen Daten. Warum auch?! Und viele Daten sind abhängig von Situationen und diversen Settings.

Es soll ja nicht mit echten, sich bewegenden Daten arbeiten, es reicht doch aus eine einfache, statische HTML Seite zu basteln, welche den Code von oben, garniert mit einer oder zwei abgespeckten Javascript-Dateien enthält. Diese kann jeder im Browser seiner Wahl ausprobieren und Dein Problem nachvollziehen.
Soll ja nicht in einen Staatsakt ausarten, aber im Moment ist es eher so ein schwammig definiertes Etwas - nix Halbes und nix Ganzes.

 

[tsseh]

Das kann ich wohl kaum von einem Forum erwarten.

genau. deswegen nimmst du den relevanten code (das dürfte nicht viel sein), steckst diesen in ein neues html-file und postest dieses hier.

 

[dkdenz]

Warum einfach, wenn's auch kompliziert geht...

 

[bis]

ich sehe auch keinen click-handler

Also das ist es wohl nicht: Ich habe ein onlick eingebaut, das das selbe macht wie das href. Läuft in FF, aber keine Änderung in IE.

<area shape='rect' coords='50,168,90,183' href="javascript:cl('1')" title='Clickable link' target='_self' alt=' ' onmouseover="Tip('Clickable link');" onmouseout="UnTip();"  
[B]onclick="javascript:cl('1')[/B]"/>

Also der onclick macht keinen Unterschied.

Eigenartig ist wirklich, daß die gesamten Maps mit allen Areas im DOM in FF natürlich sauber verhanden sind, in IE aber absolut nada davon! In IE ist nur das "usaMap" gesetzt (passiert woandern beim Bilden des "img", siehe oben). Der gesamte folgende Html-Code aber fehlt in IE im DOM.

Hm, wird wieder ein lange Nacht....