Triviales Bilderaustauschen

[sideshowbob]

Guten Morgen!

Nach 2 Tagen intensiver google konsultation und einigen erfolglosen Versuchen probiere ich es einmal auf diesen Weg.

Ich hab eine kleine Webapplikation geschrieben, die unter anderem manche Bereiche sichtbar macht und dann wieder unsichtbar. Bei Klick auf die Image Datei soll sich die Grafik austauschen und der Bereich sichtbar werden und umgekehrt. Funktioniert in allen Browsern außer im IE6 wunderbar. Hab auch die Forenbeiträge hier im Selfhtml Forum durchgelesen, doch die Tipps die bei anderen Funktioniert haben, funktionieren aus irgendeinen Grund bei mir nicht. Die Grafikdatei die ausgetauscht werden soll, wird nur manchmal angezeigt, dann wieder nicht... vielleicht hat hier irgendjemand einen Tipp für mich:

  
 imgUp = new Image();  
 imgUp.src = 'img/up.gif';  
  
  
 imgDown = new Image();  
 imgDown.src = 'img/down.gif';  
  
  
  
function upDown(flip,img) {  
  
  
 if (document.getElementById(img).getAttribute("src").indexOf("down.gif")!=-1) {  
  
  Effect.BlindDown(flip, { duration: 1.5 }); // script.acolo.us Effekt  
  document.getElementById(img).src = imgUp.src;  
  
  
 } else {  
  
  Effect.BlindUp(flip, { duration: 1.5 });  
  document.getElementById(img).src = imgDown.src;  
  
 }  
  
}  
  

Und hier der (Teil-)HTML Code:

  
<p class="searchheadline"><a href="javascript:void(0);" onclick="upDown('se1','updown1');"><img src="img/down.gif"  border="0" id="updown1" /></a>Erweiterte Suche</p>  
   <div class="searchareaextendend" style="display:none" id="se1">  
<!-- Suchinhalt -->  
</div>  

Mir ist bewußt, daß es schon einige Beiträge zu genau diesem Thema hier im Forum gibt, die ich auch schon ausprobiert habe, aber es will einfach nicht funktionieren. Ach ja: im Firefox, Opera, IE7 etc. funktioniert es tadellos.

Besten Dank im Vorraus!!

lg
Christian

[JürgenB]

Hallo sideshowbob,

... Funktioniert in allen Browsern außer im IE6 wunderbar. ...

und was passiert im IE6?

if (document.getElementById(img).getAttribute("src").indexOf("down.gif")!=-1) {

schon mal den direkten Zugriff probiert?

if (document.getElementById(img).src.indexOf("down.gif")!=-1) {

Gruß, Jürgen

[sideshowbob]

Guten Morgen Jürgen,

erstmals besten Dank für Deine Antwort!

Hallo sideshowbob,

... Funktioniert in allen Browsern außer im IE6 wunderbar. ...

und was passiert im IE6?

Bei Klick auf das Bild wird das Bild nur manchmal ausgetauscht, dann wieder mal nicht. nur jedes 3-4 mal funktioniert der Austausch. Leider Gottes haben alle Mitarbeiter bei uns noch den IE6 laufen und es gibt keine Chance auf einen anderen Browser auszuweichen. Die Website läuft ganz normal im Standard-Modus und die script.aculo.us Methoden funktionieren auch ohne Probleme sowie alle anderen JavaScript Funktionien... nur dieser kleine Optische Effekt nicht. Es ist zum Haare ausreißen, weil ich seit Wochen herumprogrammiert habe und die Mitarbeiter dann herumnörgeln, weil so eine Kleinigkeit nicht funktioniert und alles andere (am Backend etc) tadellos hinhaut...

if (document.getElementById(img).getAttribute("src").indexOf("down.gif")!=-1) {

schon mal den direkten Zugriff probiert?

jop. vorher hab ich den direkten Zugriff probiert, dann bin ich auf einen Beitrag hier im Forum gestossen und hab es dementsprechend abgeändert.

if (document.getElementById(img).src.indexOf("down.gif")!=-1) {

Gruß, Jürgen

Danke nochmals, lg Christian.

[ChrisB]

Hi,

Bei Klick auf das Bild wird das Bild nur manchmal ausgetauscht, dann wieder mal nicht.

D.h., es bleibt das aktuell angezeigte Bild bestehen - oder wird etwa das broken image-Symbol angezeigt?

Letzteres wuerde vielleicht fuer ein Caching-Problem sprechen - fuer solche ist der IE ja beruechtigt.

MfG ChrisB

[sideshowbob]

Hi,

Bei Klick auf das Bild wird das Bild nur manchmal ausgetauscht, dann wieder mal nicht.

D.h., es bleibt das aktuell angezeigte Bild bestehen - oder wird etwa das broken image-Symbol angezeigt?

Es bleibt nicht bestehen, sondern es ist einfach nichts mehr da...
Broken Image Symbol wird nicht angezeigt. Im FF funktionierts ja...

So sieht es zu Beginn aus:

und so sieht es im IE6 nach Klick auf das Bild aus:

Firefox macht es brav, wie es sein sollte:

::confused::

Letzteres wuerde vielleicht fuer ein Caching-Problem sprechen - fuer solche ist der IE ja beruechtigt.

cache hab ich eben auch geleert. Jetzt hat er mir den Pfeil nach unten 2x angezeigt, beim 3. mal (bzw. 6.) Klick hat es nicht mehr funktioniert. Ich erkenne einfach kein Muster... ab und zu zeigt er die Pfeile richtig an, dann wieder nicht *argh*

[ChrisB]

Hi,

Es bleibt nicht bestehen, sondern es ist einfach nichts mehr da...
Broken Image Symbol wird nicht angezeigt.

Dann vermute ich wirklich ein Problem mit dem Caching des IE.

cache hab ich eben auch geleert.

Wie hast du denn das Caching in den Internet Optionen eingestellt?

MfG ChrisB

[sideshowbob]

Hallo!

Wie hast du denn das Caching in den Internet Optionen eingestellt?

Ich hab folg. Einstellungen:

Cache lösche ich durch
Extras > Internetoptionen > Dateien löschen > alle Offlineinhalte löschen
sowie
Extrax > Internetoptionen > Cookies löschen > OK

:(
Danke nochmals,
lg
Christian.

[ChrisB]

Hi,

Ich hab folg. Einstellungen:

Automatisch ist nach meiner Erfahrung die bessere Einstellung, um solche Probleme zu vermeiden - nur das hilft dir ja leider eher wenig, wenn die spaeteren Nutzer der Seite das bei sich anders eingestellt haben.

Da waere dann Jürgens Vorschlag vielleicht der zielfuehrendere Weg - insb. wenn man nur *ein* Hintergrundbild dafuer verwendet, in dem beide Zustaende enthalten sind, und diese ueber Aenderung von background-position wechselt. Das hilft oftmals ganz gut, wenn es Probleme mit dem Caching von Hintergrundbildern gibt.

MfG ChrisB

[sideshowbob]

Da waere dann Jürgens Vorschlag vielleicht der zielfuehrendere Weg - insb. wenn man nur *ein* Hintergrundbild dafuer verwendet, in dem beide Zustaende enthalten sind, und diese ueber Aenderung von background-position wechselt. Das hilft oftmals ganz gut, wenn es Probleme mit dem Caching von Hintergrundbildern gibt.

Hört sich eigentlich ganz vernünftig an. Hab ich es so ungefähr richtig verstanden:

<style type="text/css">  
  
#img1 {  
  
 width:18px;  
 height:10px;  
  
 background-image: url('img/upDown.gif');  
 background-position: bottom;  
  
}  
  
</style>

und dann halt im body

<div id="img1" onclick="change('img1')">

und via javascript dann einfach die background-position auf top setzen?

[Felix Riesterer]

Lieber sideshowbob,

vielleicht ist es für Dich sogar besser, wenn Du nicht die style-Eigenschaft direkt veränderst, sondern mit Klassen arbeitest, die Du dynamisch zuweist. In meinen Projekten fahre ich mit diesen Dingen in der Tat besser, da ich dabei komplett auf die CSS-Power setzen kann.

Auch visuelle Kleinst-Anpassungen gelingen durch die Verwendung von Klassen besser.

Und wenn Du von Unterschieden zwischen IE(6) und Rest-der-Welt sprichst, dann ist es auch eine gute Idee, durch Conditional Comments ein Zusatzstylesheet für den IE zu laden, in dem zusätzliche visuelle Korrekturen für den IE auf der CSS-Ebene vorgenommen werden.

Das alles ist viel besser handhabbar, als über JavaScript direkt an style-Eigenschaften zu schrauben!

Liebe Grüße,

Felix Riesterer.

[sideshowbob]

Lieber sideshowbob,

vielleicht ist es für Dich sogar besser, wenn Du nicht die style-Eigenschaft direkt veränderst, sondern mit Klassen arbeitest, die Du dynamisch zuweist. In meinen Projekten fahre ich mit diesen Dingen in der Tat besser, da ich dabei komplett auf die CSS-Power setzen kann.

Da hast Du natürlich vollkommen recht. Ich habe es im restlichen Projekt auch alles brav getrennt (Content, Business Logic, Style etc.) Nur bei diesem kleinen Ding war ich einfach schon am verzweifeln, da es einfach nicht klappen wollte. Und da ich sehr viel im AJAX arbeite, war es einfach naheliegend etwas mit JavaScript zu fabrizieren.

Auf jeden Fall funktioniert der Austausch der Bilder jetzt! Hab die Bilder einfach im IE vorgeladen (Script vom Dreamweaver) und jetzt haut es tadellos hin. Keine Ahnung, was der IE6 für Macken hat. Bin auf jeden Fall froh, wenn wir mal "upgraden". Wird nur leider noch etwas auf sich warten lassen, da sehr viele inhouse Webapplikation (nicht von mir ;) auf den IE6+JavaApplets+angepasste security.properties aufsetzen und es anscheinend nicht so einfach ist diese zu portieren.

Auf jeden Fall möchte ich allen die mir hierbei geholfen haben recht herzlich für Ihre Zeit und Mühen danken!!!

Ich werde sicherlich jetzt öfters hierher vorbeischauen um hoffentlich auch dem einen oder anderen mit Input behilflich zu sein.

Beste Grüße aus Wien,

lg
Christian.

[JürgenB]

Hallo sideshowbob,

hast du schon mal versucht, mit Hintergrundbildern zu arbeiten? Du könntest auch die Bilder durch entsprechende Zeichen (9650 und 9660) ersetzen. So mache ich es in meinem Tabellensortierer.

Gruß, Jürgen

[LX]

Hallo!

Leider ist Dein Code nicht vollständig, so dass wir nicht sehen können, ob bspw. hasLayout fehlt, ob Du im Quirksmode bist oder ähnliche Fehler vom IE6 auslöst, welche das Funktionieren von script.acoul.us behindern könnten.

Meine Kristallkugel ist zwar leider vereist, aber ich würde spontan auf hasLayout tippen. Gebe dem Bild mal testweise die CSS-Eigenschaft "zoom: 1;".

Gruß, LX

[sideshowbob]

Hallo!

Ebenfalls ein nettes Hallo!

Die script.aculo.us Methoden funktionieren einwandfrei. Mit denen hatte ich nie das Problem. Die Website läuft im Standardkonformen Modus (zumindest im Firefox). Ich kann schon den kompletten Code posten, nur ist der etwas länger [...] und den Link kann ich leider nicht posten, da es sich um eine Intranet Applikation handelt. :(

Leider ist Dein Code nicht vollständig, so dass wir nicht sehen können, ob bspw. hasLayout fehlt, ob Du im Quirksmode bist oder ähnliche Fehler vom IE6 auslöst, welche das Funktionieren von script.acoul.us behindern könnten.

Meine Kristallkugel ist zwar leider vereist, aber ich würde spontan auf hasLayout tippen. Gebe dem Bild mal testweise die CSS-Eigenschaft "zoom: 1;".

Gruß, LX

lg
Christian