Bild austauschen. Problem in Firefox

[Firepete]

Hallo,

ich benutze folgendes, einfaches script, um ein Bild auszuwechseln:

  
function big(bild) {  
    document.getElementById('big').src = bild;  
}

Und bei den Thumbnails dann: ~~~html

<a href="#" class="thumb" onMouseOver="big('a1.jpg');"><img src="a1_thumb.jpg" width="86" height="50" border="0" /></a>

  
Im Internet Explorer (der leider auf dem Rechner an dem ich sitze momentan der einzige funktionierende Browser ist.. Unser Systemadmin kümmert sich aber bald..) funktioniert das auch prima, aber ich habe es an einem anderen Rechner mit Firefox ausprobiert und das Bild wurde einfach nicht gewechselt.  
  
JavaScript ist aber aktiviert.  
  
Woran kann das liegen? Ich hab leider so gut wie keine Ahnung von JavaScript, deshalb bin ich unfähig, den Fehler zu diagnostizieren..  
  
Vielen Dank im Voraus,  
  
Firepete

[Take]

Hallo,

ich benutze folgendes, einfaches script, um ein Bild auszuwechseln:

function big(bild) {
    document.getElementById('big').src = bild;
}

>   
> Und bei den Thumbnails dann: ~~~html
  

> <a href="#" class="thumb" onMouseOver="big('a1.jpg');"><img src="a1_thumb.jpg" width="86" height="50" border="0" /></a>  
> 

Hallo,
In deinem HTML Quelltext gibt es kein Bild mit der ID "big"!
Es müsste also heißen:

  
<a href="#" class="thumb" onMouseOver="big('a1.jpg');"><img src="a1_thumb.jpg" id="big" width="86" height="50" border="0" /></a>  

Außerdem fehlt noch das vorgeschriebene alt-Attribut, das aber nur am Rande.
Gruß,

Take

[Firepete]

Oh, das ist mein Fehler.
So ein Element gibt es natürlich auch noch:

<img style="margin: 0 0 20px 0;" src="leer.jpg" id="big" height="190" width="300">

Hatte nur vergessen, es in den Ausgangspost einzufügen.

Danke wegen des Hinweises. Das alt-Attribut vergesse ich regelmäßig.. Gewohnheitssache ;)

[Take]

Oh, das ist mein Fehler.
So ein Element gibt es natürlich auch noch:

<img style="margin: 0 0 20px 0;" src="leer.jpg" id="big" height="190" width="300">

Hatte nur vergessen, es in den Ausgangspost einzufügen.

Danke wegen des Hinweises. Das alt-Attribut vergesse ich regelmäßig.. Gewohnheitssache ;)

Geht es denn jetzt? Sonst wüsste ich nämlich auch nicht weiter :)

[Firepete]

Nein, geht leider immer noch nicht..
Ich kann es mir auch nicht erklären. Ist ja eigentlich 'ne ganz simple Sache.

[ChrisB]

Hi,

du ersetzt das Bild "a1_thumb.jpg" durch "a1.jpg" - auf Grund dieser Benennung dürfen wir wohl davon ausgehen, dass das Ersatzbild eine größere Version des Thumbs ist, aber von den Maßen abgesehen inhaltlich gleich?

Dann wird das Bild vermutlich getauscht (wenn die JS-Fehlerkonsole nichts meldet) - aber du merkst es nicht.
Was auch ziemlich logisch ist, denn dein IMG-Objekt hat die Maße width="86" und height="50"; die werden nicht geändert, sondern nur die Bildquelle, so dass das neue Bild entsprechend skaliert (also hier wahrscheinlich verkleinert) wird - und wenn es inhaltlich wie gesagt das gleiche darstellt, dann merkst du davon optisch herzlich wenig.

MfG ChrisB

[Firepete]

Deine Idee ist natürlich ein guter Ansatz, aber ich habe wohl den Seitenaufbau nicht genau genug erklärt.

Also, es gibt ein großes Bild mit der ID "big" und mehrere mit der ID thumb (ich sollte da eine Klasse statt ID nehmen, fällt mir grade auf, oder?).

Wenn man über eines der Thumbnails fährt, wird das große Bild durch eine größere Version davon ersetzt.
Es ist also eine Art Galerie, bei dernicht geklickt werden muss.

[ChrisB]

Hi,

Deine Idee ist natürlich ein guter Ansatz, aber ich habe wohl den Seitenaufbau nicht genau genug erklärt.

Na dann gib' bitte endlich mal Butter bei die Fische, und zeige uns das ganze als Online-Beispiel.

MfG ChrisB

[Firepete]

Ok, hier hast du ein Online-Beispiel:

http://www.werben-trotz-krise.de/img/test2.htm

Das Bild sieht man erst, wenn man mit der Maus über eins der Thumbnails fährt. Auf der fertigen Seite spielt das dann keine Rolle mehr.

Wenn wir gerade dabei sind:
Wie kann ich am elegantesten die Bilder vorladen, damit man keine Ladezeiten hat, wenn man über die Bilder fährt?

[Take]

Wenn wir gerade dabei sind:
Wie kann ich am elegantesten die Bilder vorladen, damit man keine Ladezeiten hat, wenn man über die Bilder fährt?

Das machst du am Besten mit

  
var bild = new Image;  
bild.src="http://www.example.com/Test.jpg;  
document.getElementById("mybig").src=bild.src;  

Gruß,
Take

[fastix®]

Moin!

Ersetze in Deinem Skript jedes "big(" durch "MyBig(" und es wird gehen...
Ich vermute, Du willst a href="#" noch durch etwas anderes ersetzen. Ansonsten könntest Du auch gleich

<img onmouseover="myBig('http://www.werben-trotz-krise.de/img/a3.jpg');"  
src="http://www.werben-trotz-krise.de/img/a3_thumb.jpg" border="0" height="50" width="86">

verwenden.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml"><head>  
  
  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>galerietest</title>  
<script type="text/javascript">  
  
function myBig(bild) {  
    document.getElementById('big').src = bild;  
}  
  
</script>  
  
</head><div firebugversion="1.5.4" style="display: none;"  
id="_firebugConsole"></div><body>  
<p>Mit &lt;a href=&quot;&quot;&gt;<br>  
<a href="#" class="thumb" onmouseover="myBig('http://www.werben-trotz-krise.de/img/a3.jpg');"><img  
src="http://www.werben-trotz-krise.de/img/a3_thumb.jpg" border="0" height="50" width="86"></a>  
  
<a href="#" class="thumb" onmouseover="myBig('http://www.werben-trotz-krise.de/img/a1.jpg');"><img  
src="http://www.werben-trotz-krise.de/img/a1_thumb.jpg" border="0" height="50" width="86"></a>  
  
<a href="#" class="thumb" onmouseover="myBig('http://www.werben-trotz-krise.de/img/a2.jpg');"><img  
src="http://www.werben-trotz-krise.de/img/a2_thumb.jpg" border="0" height="50" width="86"></a>  
  
<a href="#" class="thumb" onmouseover="myBig('http://www.werben-trotz-krise.de/img/a3.jpg');"><img  
src="http://www.werben-trotz-krise.de/img/a3_thumb.jpg" border="0" height="50" width="86"></a>  
</p>  
  
<p>Ohne &lt;a href=&quot;&quot;&gt;<br>  
<img onmouseover="myBig('http://www.werben-trotz-krise.de/img/a3.jpg');"  
src="http://www.werben-trotz-krise.de/img/a3_thumb.jpg" border="0" height="50" width="86">  
  
<img onmouseover="myBig('http://www.werben-trotz-krise.de/img/a1.jpg');"  
src="http://www.werben-trotz-krise.de/img/a1_thumb.jpg" border="0" height="50" width="86">  
  
<img onmouseover="myBig('http://www.werben-trotz-krise.de/img/a2.jpg');"  
src="http://www.werben-trotz-krise.de/img/a2_thumb.jpg" border="0" height="50" width="86">  
  
<img onmouseover="myBig('http://www.werben-trotz-krise.de/img/a3.jpg');"  
src="http://www.werben-trotz-krise.de/img/a3_thumb.jpg" border="0" height="50" width="86">  
</p>  
  
<p>Das Bild:<br>  
<img src="test-Dateien/leer.html" id="big" height="190" width="280">  
</p>  
  
</body></html>

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[fastix®]

Moin!

Moin!

Ersetze in Deinem Skript jedes "big(" durch "MyBig(" und es wird gehen...

Grund ist, Du hast ein in Firefox reserviertes Wort als Funktionsname benutzt. Deshalb bekommst Du da auch die Fehlermeldung "big ist keine Funktion."

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Firepete]

Vielen Dank, hat super geklappt! =)

[fastix®]

Moin!

Moin!

Moin!

Ersetze in Deinem Skript jedes "big(" durch "MyBig(" und es wird gehen...

Grund ist, Du hast ein in Firefox reserviertes Wort als Funktionsname benutzt. Deshalb bekommst Du da auch die Fehlermeldung "big ist keine Funktion."

Ach so. "big" konnte im Firefox kein Funktionsname sein, weil es bereits als Element mit einer ID verwendet wurde und deshalb reserviert war. Das Problem hatte ich schon mal.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Gunnar Bittersmann]

@@fastix®:

nuqneH

Grund ist, Du hast ein in Firefox reserviertes Wort als Funktionsname benutzt.

Wenn man SELFHML Glauben schenken darf, ist "big" kein <http://de.selfhtml.org/javascript/sprache/reserviert.htm@title=reserviertes Wort>.

Ach so. "big" konnte im Firefox kein Funktionsname sein, weil es bereits als Element mit einer ID verwendet wurde und deshalb reserviert war.

Ach so?? Das war wohl nichts.

<p id="foo">foo</p>  
<p><button onclick="foo('bar')">bar</button></p>  
<script type="text/javascript">[code lang=javascript]function foo(s) { alert(s); }
~~~</script>[/code]  
  
gibt im Firefox problemlos "bar" aus. Und das auch, wenn man alle "foo" durch "big" ersetzt.  
  
Es ist der IE, der für ein Element mit @id="foo" eine globale Variable foo anlegt:  
  
~~~html
<p id="foo">foo</p>  
<script type="text/javascript">[code lang=javascript]alert(foo);
~~~</script>[/code]  
  
gibt im IE "[object HTMLParagraphElement]". (Und im Firefox einen Laufzeitfehler.)  
  
Diese globale Variable kann aber überschriben werden:  
  
~~~html
<p id="foo">foo</p>  
<script type="text/javascript">[code lang=javascript]alert(foo);
~~~</script>  
<p><button onclick="foo('bar')">bar</button></p>  
<script type="text/javascript">`function foo(s) { alert(s); }`{:.language-javascript}</script>  
<script type="text/javascript">`alert(foo);`{:.language-javascript}</script>[/code]  
  
Anfangs wie gehabt "[object HTMLParagraphElement]", nach der Funktionsdeklaration wird "function foo(s) { alert(s); }" ausgegeben.  
  
Und beim Click auf den Button erscheint auch im IE "bar".  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)

[fastix®]

Moin!

Qapla'

Dann sagen mir einen anderen Grund, warum Firefox
1. meldete big() sei keine Funktion
2. nach dem Umbennenen in myBig() klaglos das tat, was vorgesehen war.

Qaplapeg'

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Kai345]

[latex]Mae  govannen![/latex]

Grund ist, Du hast ein in Firefox reserviertes Wort als Funktionsname benutzt.

Wenn man SELFHML Glauben schenken darf, ist "big" kein <http://de.selfhtml.org/javascript/sprache/reserviert.htm@title=reserviertes Wort>.

Auch wenn's in diesem Fall keine neuen Erkenntnisse bringt: Ich schaue da lieber in die offizielle Doku. Garage bei Javascript.

Cü,

Kai

[Gunnar Bittersmann]

@@Kai345:

nuqneH

Auch wenn's in diesem Fall keine neuen Erkenntnisse bringt: Ich schaue da lieber in die offizielle Doku.

Als offizielle Doku würde ich doch eher ECMA-262 ansehen.

Garage bei Javascript.

So manche Software hat ihren Ursprung in einer Garage.

Qapla'

[Kai345]

[latex]Mae  govannen![/latex]

Auch wenn's in diesem Fall keine neuen Erkenntnisse bringt: Ich schaue da lieber in die offizielle Doku.

Als offizielle Doku würde ich doch eher ECMA-262 ansehen.

Nicht unbedingt, es ging um reservierte Wörter in Firefox, insofern ist in diesem Fall die Mozilla-Doku relevant. Auch sonst bei ähnlichen FF-Problemen, da Mozillas JS i.d.R. propietär weiter entwickelt ist als die Version in ECMA.

Cü,

Kai

[fastix®]

Moin!

Ach so?? Das war wohl nichts.

<p id="foo">foo</p>

<p><button onclick="foo('bar')">bar</button></p>
<script type="text/javascript">[code lang=javascript]function foo(s) { alert(s); }

  
  
Dann teste mal:  
  
~~~html
<img id="foo" alt="Bild" src="test.jpg">  
<p><button onclick="foo('bar')">bar</button></p>  
<script type="text/javascript">[code lang=javascript]function foo(s) { alert(s); }
~~~</script>[/code]  
  
Bei mir kommt zuverlässig die Fehlermeldung: foo is not a function  
  
  
  
MFFG (Mit freundlich- friedfertigem Grinsen)  
  
fastix  

-- 
[Des fastix kleines CMS](http://www.fastix.org/fastix-cms/)

[Gunnar Bittersmann]

@@fastix®:

nuqneH

Dann teste mal:

<img id="foo" alt="Bild" src="test.jpg">

<p><button onclick="foo('bar')">bar</button></p>
<script type="text/javascript">[code lang=javascript]function foo(s) { alert(s); }

>   
> Bei mir kommt zuverlässig die Fehlermeldung: foo is not a function  
  
ACK.  
  
Deine Aussage „weil es bereits als Element mit einer ID verwendet wurde“ stimmte aber nicht. Nicht bei allen Elementen ist eine gleichnamige ID problematisch, sondern nur bei bestimmten, 'img' bspw.  
  
Warum, wüsste ich auch gern.  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)

[fastix®]

Moin!

Bei mir kommt zuverlässig die Fehlermeldung: foo is not a function

ACK.

Dann sind wir und ja einig, dass wie von mir dargestellt, ein Element mit gleicher ID wie ein Funktionsname zu dem Problem führt. Die Umbenennung der Funktion hatte dann auch wie von mir erwartet zur Lösung geführt. Ich hatte aber nicht ein bestimmtes Element gemeint und auch nicht benannt. Img-Elemente sind nun mal Mitglieder der Menge der HTML-Elemente. Dass es (womöglich nicht ausschließlich, aber insbesondere und das wohl auch noch eher zufällig) img-Elemente, jedoch nicht alle Arten von Elementen  betrifft steht inzwischen auch fest: ich habe soeben div, p, input, a, form, textarea negativ auf das Problem getestet.

Bei einem object-Tag mit gleicher ID kommt folgende Fehlermeldung:

"uncaught exception: [Exception... "Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///home/fastix/test.html :: onclick :: line 1" data: no]"

Sieht aus, als wäre es eine Bugmeldung wert.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix