nicht angemeldet
Am besten lernt man das Potential einer Skript-Sprache kennen, wenn man ab und zu mal versucht, mehrere Lösungen für ein Problem zu finden. Um einen kleinen anklickbaren Bildwechsel zu bewerkstelligen stehen unten 4 unterschiedliche Funktionen zur Verfügung, die alle dasselbe bewirken:
1. Eine einfache if-else Abfrage
2. Eine kleine Zählschleife mit einem Array
3. Eine kleine Zählschleife ohne Array
4. Eine Variante mit innerHTML.
Dabei hab' ich zwei Bilder mit gleichlautendem name- und id-Attribut eingebaut ( flipflop ) Dabei fällt auf, daß lediglich der MSIE hier eine meiner Meinung nach korrekte Differenzierung vornimmt und alle anderen Browser das name-Attribut wie ein id-Attribut behandeln und demzufolge auch das falsche Bild wechsel. ( also hier das zweite statt das dritte Bild )
Die betroffene Code-Zeile: document.images.flipflop.src
Frage: Was ist hierfür die Ursache? Wenn ich für das name-Attribut einen anderen Namen wähle, funktioniert alles einwandfrei!
Gruß Wastl
<html><head><title></title><script type="text/javascript">
var bild1 = new Image(); bild1.src = "bild1.png";
var bild2 = new Image(); bild2.src = "bild2.png";
var bild3 = new Image ();
var bilderalbum = new Array ("bild1.png","bild2.png");
var image = bild1;
var index = 0;
var zahl = 1;
function bildwechsel1 () {
if (image == bild1) {
image = bild2;
document.images[0].src = bild2.src;
}else {
image = bild1;
document.images[0].src = bild1.src;
}}
function bildwechsel2 ()
{
index++
document.getElementById ("flipflop").src = bilderalbum[index];
if (index == 1) {index = -1;}
}
function bildwechsel3 ()
{
zahl++
document.images.flipflop.src = "bild"+zahl+".png";
if (zahl == 2) {zahl = 0;}
}
function bildwechsel4 ()
{
zahl++
var wechsel = document.getElementById ("innerhtml");
wechsel.innerHTML = "<img src='bild"+zahl+".png' onclick='bildwechsel4 ()' alt=''>";
if (zahl == 2) {zahl = 0;}
}
</script></head><body>
<img src="bild1.png" onclick="bildwechsel1 ()" alt="" align="left">
<img id="flipflop" src="bild1.png" onclick="bildwechsel2 ()" alt="">
<img name="flipflop" src="bild1.png" onclick="bildwechsel3 ()" alt="" align="left">
<div id="innerhtml"><img src="bild1.png" onclick="bildwechsel4 ()" alt=""></div>
</body></html>