IE zeigt mittels Javascript getauschtes Image nicht an

[Josef]

Hallo allerseits,

aus irgendeinem Grund weigert sich der IE 6.x eine Grafik anzuzeigen, die ich mit nachfolgender Javascript-Funktion austausche. Seltsam ist, dass dieser Effekt nur online auftaucht, also, wenn das Skript auf einem Webserver ausgeführt wird. Lokal auf dem heimischen Rechner funktioniert das ohne Probleme. Firefox führt die Funktion dagegen anstandslos on- wie offline aus.
Am allersuspektesten wird es aber, wenn ich vor das "return true;" ein "alert ('tralalala');" setze, denn dann zeigt der IE die Grafik an, wie er soll (und zwar schon bevor der Alert-Dialog aufgeht).

function changeImage(layerStatus, imageId) {
 if (imageId != null) {
  var icon = document.getElementById(imageId);

if (layerStatus == 'block') {
    icon.src = icon.src.replace(/(open|close).gif$/, 'close.gif');
    icon.title = 'close';
   } else {
    icon.src = icon.src.replace(/(open|close).gif$/, 'open.gif');
    icon.title = 'open';
  }
 }
 return true;
}

Danke schonmal für Tipps, Ideen und/oder Lösungen. Grüße, Josef

[Jörg Peschke]

Hallo Josef,
Also ich habe eine ganz vage Vermutung, aber weiss nicht, obs damit zu tun haben kann:

Es ist möglich, dass der IE auf das "return(true)" stösst, BEVOR er den Request an das neue Bild absetzen kann. Und dann vergisst ers einfach :)
(Eigentlich sollte er das nicht, aber mei, es ist der IE - ich glaube mich zu erinnern, dass ich just dieses Problem mal damit hatte.)

Wenn du ein alert vorher machst, hat er beim Alert die Funktion noch nicht verlassen, und weiß deshalb noch, dass er eigentlich noch was zu tun hat.

Mögliche Abhilfe:
Versuch mal, Icon ausserhalb der Funktion (also global) zu definieren und zuzuweisen, also:

var icon = document.getElementById(imageId);
function changeImage(layerStatus, imageId) {
....
}

Vielleicht hilfts ja.

Viele Grüße,
Jörg

[Josef]

Hi Jörg,

leider nein, daran lag's nicht. Noch abstruser wir das Ganze, wenn ich mit der rechten Maustaste auf das "nicht angezeigte" Bild klicke (der Link dahinter funktioniert übrigens auch einwandfrei) und das Bild mit "kopieren" in die Zwischenablage kopiere. Anschließend füge ich es in ein Grafikprogramm ein und - schwups - da isses wieder!?

Dennoch danke und Grüße, Josef

[Axel Richter]

Hallo,

aus irgendeinem Grund weigert sich der IE 6.x eine Grafik anzuzeigen, die ich mit nachfolgender Javascript-Funktion austausche. Seltsam ist, dass dieser Effekt nur online auftaucht, also, wenn das Skript auf einem Webserver ausgeführt wird. Lokal auf dem heimischen Rechner funktioniert das ohne Probleme. Firefox führt die Funktion dagegen anstandslos on- wie offline aus.
Am allersuspektesten wird es aber, wenn ich vor das "return true;" ein "alert ('tralalala');" setze, denn dann zeigt der IE die Grafik an, wie er soll (und zwar schon bevor der Alert-Dialog aufgeht).

function changeImage(layerStatus, imageId) {
if (imageId != null) {
  var icon = document.getElementById(imageId);

if (layerStatus == 'block') {
    icon.src = icon.src.replace(/(open|close).gif$/, 'close.gif');
    icon.title = 'close';
   } else {
    icon.src = icon.src.replace(/(open|close).gif$/, 'open.gif');
    icon.title = 'open';
  }
}
return true;
}

Wie wird das aufgerufen?

<img ... onclick="changeImage('block', 'id1');">

<img ... onclick="return changeImage('block', 'id1');">

oder wie?

Kann man das mal irgendwo online sehen?

viele Grüße

Axel

[Josef]

Hi Axel,

das wird wie folgt aufgerufen:

<a href="Javascript: void(0);" onClick="changeImage('block', 'id1');"><img id="id1" src="img/close.gif"></a>

Online kann ich das leider nirgends demonstrieren, da das Ganze in ein CMS eingebaut ist.

Gruß, Josef

[Axel Richter]

Hallo,

das wird wie folgt aufgerufen:

<a href="Javascript: void(0);" onClick="changeImage('block', 'id1');"><img id="id1" src="img/close.gif"></a>

Da ich jetzt aber auch keine Lust habe extra für Dich, weil Du ja offensichtlich keine Lust dazu hast ;-), erst ein Testbeispiel irgendwo hochzuladen[1], muss ich raten.

Du rufst changeImage() wie eine Funktion ohne Rückgabewert auf. Wozu, noch schlimmer _wohin_, gibt die Funktion dann true zurück?

Mach entweder das return true aus der Funktion raus. JavaScript-Funktionen müssen keinen Rückgabewert haben. Oder rufe es so:

onclick="return changeImage('block', 'id1');"

auf.

[1] Ja, ich weiß, Dein Server steht nur in einem Intranet und Du hast überhaupt gar keine Möglichkeit auf Internet-Webspace zuzugreifen ... usw. usf.

viele Grüße

Axel

ps.: Die Kleinschreibung des Attributes onclick ist Absicht.

[Josef]

Hi Axel,

Die 'return's sowohl im Aufruf, als auch in der Javascript-Funktion hatten leider keine Auswirkung - egal ob sie nun da waren oder nicht.

Wie gesagt, das Ganze ist Teil eines Seitenstrukturbaumes innerhalb eines CMS. Habe aber mal eine Grafik mit besagtem Aufruf aus dem HTML-Quelltext rauskopiert:

<a href="Javascript: void(0);" onclick="changeLayer('pageNode_de_3', 'pageNode_de_3_img'); this.blur();"><img id="pageNode_de_3_img" src="../intern/templates/default/app_pages/img/icon_path_sub_close.gif" border="0"></a>

Die vollständige Javascript-Funktion geht so:

function changeLayer(layerId, imageId) {
 if (document.getElementById(layerId).style.display == 'none') {
  var layerStatus = 'block';
 }  else {
  var layerStatus = 'none';
 }
 document.getElementById(layerId).style.display = layerStatus;
 saveLayerStatus(layerId);

// Falls Icon-Id mitgegeben -> tauschen
 if (imageId != null) {
  var icon = document.getElementById(imageId);

if (layerStatus == 'block') {
    icon.src = icon.src.replace(/(open|close).gif$/, 'close.gif');
    icon.title = 'close';
   } else {
    icon.src = icon.src.replace(/(open|close).gif$/, 'open.gif');
    icon.title = 'open';
   }
 }
  }

... wobei 'saveLayerStatus ()' einen Cookie speichert/ändert.

Mehr Quelltexte haben nicht mit dem ganzen Problem zu tun.

HTH und Grüße, Josef

[Axel Richter]

Hallo,

<a href="Javascript: void(0);" onclick="changeLayer('pageNode_de_3', 'pageNode_de_3_img'); this.blur();"><img id="pageNode_de_3_img" src="../intern/templates/default/app_pages/img/icon_path_sub_close.gif" border="0"></a>

Es liegt an href="Javascript: void(0);". Mit href="#" funktioniert es. Natürlich wird dann immer an den Seitenanfang gesprungen. Das kannst Du aber mit

onclick="changeLayer('pageNode_de_3', 'pageNode_de_3_img'); this.blur(); return false;"

verhindern. Damit wird bei onclick die Linkfunktionalität des A-Elementes außer Kraft gesetzt, weil onklick vor der Linkfunktionalität ausgeführt wird und return false dafür sorgt, dass onclick das Klick-Ereignis nicht weiterreicht. Dann würde natürlich auch wieder href="Javascript: void(0);" funktionieren ;-).

Eventuell kann auch Deine Funktion false zurückgeben, dann:

onclick="return changeLayer('pageNode_de_3', 'pageNode_de_3_img');"

Dann funktioniert allerdings das blur() nicht mehr.

viele Grüße

Axel

[Josef]

Hi Axel,

Bingo :)) Das war das Problem und der erste Tipp war die richtige Lösung. Vielen Dank nochmal und der Abend ist gerettet ;-).

Grüße, Josef

[wahsaga]

hi,

Es liegt an href="Javascript: void(0);". Mit href="#" funktioniert es. Natürlich

... ist das aber immer noch ziemlicher Blödsinn, <a> zu verwenden, wenn eigentlich gar kein Link vorliegt.

gruß,
wahsaga

[Axel Richter]

Hallo,

Es liegt an href="Javascript: void(0);". Mit href="#" funktioniert es. Natürlich
... ist das aber immer noch ziemlicher Blödsinn, <a> zu verwenden, wenn eigentlich gar kein Link vorliegt.

Ja, normalerweise mache ich das ja auch nicht, weshalb mir das "Problem" auch unbekannt war. Aber ob er so tief in das CMS eingreifen kann?

viele Grüße

Axel

[Josef]

Hi Axel,

Ja, normalerweise mache ich das ja auch nicht, weshalb mir das "Problem" auch unbekannt war. Aber ob er so tief in das CMS eingreifen kann?

... kann er ;-). Allerdings sollte der User doch auch erkennen, dass es da was zum Anklicken gibt, daher der Link.
Ok, den Mauszeiger könnte man auch mit einer Styleangabe ändern. Wäre das sinnvoller?

Gruß, Josef

[Struppi]

Ja, normalerweise mache ich das ja auch nicht, weshalb mir das "Problem" auch unbekannt war. Aber ob er so tief in das CMS eingreifen kann?
... kann er ;-). Allerdings sollte der User doch auch erkennen, dass es da was zum Anklicken gibt, daher der Link.
Ok, den Mauszeiger könnte man auch mit einer Styleangabe ändern. Wäre das sinnvoller?

Ja.

Struppi.

[Axel Richter]

Hallo,

Ja, normalerweise mache ich das ja auch nicht, weshalb mir das "Problem" auch unbekannt war. Aber ob er so tief in das CMS eingreifen kann?
... kann er ;-). Allerdings sollte der User doch auch erkennen, dass es da was zum Anklicken gibt, daher der Link.
Ok, den Mauszeiger könnte man auch mit einer Styleangabe ändern. Wäre das sinnvoller?

Der Idealfall wäre, wenn der Link auch ohne JavaScript noch ein Ziel hätte. Beispielsweise könnte in Deinem Baum das JavaScript den Zweig clientseitig per JavaScript auf und zu machen, und so Traffic sparen. Im href könnte aber trotzdem der URI zu einer expandierten bzw. eben nicht expandierten HTTP-Ressource stehen, die eben serverseitig erzeugt wird, falls der Client kein JavaScript einsetzt.

viele Grüße

Axel

[Struppi]

Mach entweder das return true aus der Funktion raus. JavaScript-Funktionen müssen keinen Rückgabewert haben. Oder rufe es so:

Das ist so nicht richtig.
Gerade bei Event Funktionen kann der Rückgabewert wichtig sein.

Struppi.

[Axel Richter]

Hallo,

Mach entweder das return true aus der Funktion raus. JavaScript-Funktionen müssen keinen Rückgabewert haben. Oder rufe es so:
Das ist so nicht richtig.
Gerade bei Event Funktionen kann der Rückgabewert wichtig sein.

Dann müssen sie aber:

onevent="return eventfunktion();"

aufgerufen werden und nicht:

onevent="eventfunktion();"

viele Grüße

Axel