girlfriend: Bildertausch mit setAttribute()

<html>
Hallo,

Nachfolgendes Script ersetzt bei "onclick" das erste Bild im Array durch das zweite Bild im Array, bis das Ganze wieder von vorne losgeht - eine Klick-Galerie mit Endlosschleife also.

Für den Bildertausch nutze ich "setAttribute()". (siehe unten)

Im Internet Explorer 5.5 funktioniert der Bildertausch reibungslos, im Firefox 0.8 nicht.

1. Frage hierzu:

Warum ist das so - wo ist der Fehler ?

2. Frage:

Nach "JavaScript GE-PACKT" sind für "setAttribute()" im Internet Explorer drei, im NS nur zwei Parameter erforderlich:

1. Parameter: Name des Attributes // hier 'src'
2. Parameter: Wert des Attrbutes // hier bild[i]
3. ein Parameter 0 oder 1, der Anweisungen für das Überschreiben eines eventuell vorhandenen Attributes regelt.

Muss ich diesen dritten Parameter wirklich setzen ? Funktionsstörungen treten im IE ohne ihn jedenfalls nicht auf ....

Für Tips sehr dankbar

girlfriend

<head>
<script type="text/javascript">
<!--
var i = 0;

var bilder = new Array();
bilder[0] = "Motiv01.jpg";
bilder[1] = "Motiv02.jpg";

function zeige_bild()
{

i++;
if (i > bilder.length-1)
i = 0;

ebene = document.getElementById('ebene01');
bild = ebene.getElementsByTagName('img');
bild(0).setAttribute('src',bilder[i]);

}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<div id="ebene01">
<img src="Motiv01.jpg" name="motiv01" id="motiv01" width="200" height="150" alt="Bescheibung" border="0" onclick="zeige_bild()"></div>
</body>
</html>

  1. Hi,

    bild = ebene.getElementsByTagName('img');
    bild(0).setAttribute('src',bilder[i]);

    bild ist eine Node-Collection, keine Methode.

    Cheatah

    --
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
  2. Hallo,

    ebene = document.getElementById('ebene01');
    bild = ebene.getElementsByTagName('img');
    bild(0).setAttribute('src',bilder[i]);

    DOM-konform:
    bild.item(0).setAttribute('src',bilder[i]);

    oder unter JS in HTML-Browsern alternativ:
    bild[0].setAttribute('src',bilder[i]);

    BTW: Die item()-Schreibweise ist z. B. beim DOM-Scripting im SVG-Kontext erforderlich. Insofern besser gleich daran gewoehnen.

    MfG, Thomas

    --
    SVG - Learning By Coding
    http://svglbc.datenverdrahten.de/
    1. Hallo Thomas,

      bestimmte Namen stehen hier einfach für hervorragende Antworten, herzlichen Dank.

      Habe den DOM mit allen seinen Untiefen noch nicht verdaut, da wird schon das nächste Fass - um Dein Stichwort SGV aufzugreifen - aufgemacht .... zum schwindelig werden. :-/

      Mach irgendwann doch noch in Fiedhofsgärtner, wenn das so weitergeht.

      Gruss girlfriend

      1. um Dein Stichwort SGV aufzugreifen

        SVG natürlich!

    2. Hallo Thomas, (und alle Anderen selbstverständlich auch)

      ich habe im Zusammenhang mit setAttribute DOCH NOCH eine Frage:

      Nachfolgendes Script tauscht bei mouseover / mouseout zwei Bilder gegeneinander aus (Motiv01 gegen Motiv02).

      document.getElementsByTagName('img') ermittelt alle Bilder des Dokumentes und speichert sie in dem Array "bild".

      Mein Beispieldokument hat zwei Bilder (beide Motiv01), auf die ich mit dem Indexwert des Array zugreifen und mittels der Funktion sowohl für bild[0] als auch für bild[1] einen Bildertausch mit Motiv02 vornehmen kann.

      Das Script funktioniert in IE und Firefox ....

      Wo ist aber der entscheidende Unterschied zu dem ersten von mir bechriebenen Script, als ich item() verwenden musste, damit Firefox mitspielt ????

      Bin etwas ratlos .....

      Mit freundlichen Grüßen girlfriend

      <script type="text/javascript">
      <!--
      function wechsle_bild(i,motiv)
      {
      bild = document.getElementsByTagName('img');
      bild[i].setAttribute('src',motiv);
      }
      //-->
      </script>

      <body>

      <img src="Motiv01.gif" name="motiv01" id="motiv01" width="100" height="100" alt="Beschreibung" border="0" onmouseover="wechsle_bild(0,'Motiv02.gif')" onmouseout="wechsle_bild(0,'Motiv01.gif')">

      <img src="Motiv01.gif" name="motiv01" id="motiv01" width="100" height="100" alt="Beschreibung" border="0" onmouseover="wechsle_bild(0,'Motiv02.gif')" onmouseout="wechsle_bild(0,'Motiv01.gif')">

      </body>