SL: Bilderwechsel

SELF-Forum

Bilderwechsel

SL
– Informationen zu den Bewertungsregeln

Guten Tag,

ich habe einen Script gefunden, den ich eingesetzt habe, dieser seine Funktion auch erfüllt, nur in der Statuszeile im IE ständig "Fehler auf der Seite." erscheint.

Script:

<SCRIPT LANGUAGE="JavaScript">

{
alt0 = new Image();
alt0.src = "elemente/willkommen.gif";

alt1 = new Image();
alt1.src = "elemente/portrait.jpg";

alt2 = new Image();
alt2.src = "elemente/zukunft.jpg";

alt3 = new Image();
alt3.src = "elemente/portfolio.jpg";

alt4 = new Image();
alt4.src = "elemente/kontakt.jpg";

}
function imageChange(imageID,imageName,imageID2,imageName2,imageID3,imageName3,imageID4,imageName4) {

{
document.images[imageID].src = eval(imageName + ".src");
document.images[imageID2].src = eval(imageName2 + ".src");
document.images[imageID3].src = eval(imageName3 + ".src");
document.images[imageID4].src = eval(imageName4 + ".src");
}

}

</script>

Des Weiteren folgt:

<center>
<pre><a href="URL" onMouseOver="imageChange('global','alt1','one','graphic1on')" onMouseOut="imageChange('global','alt0','one','graphic1')">
<img src="elemente/portrait.gif" name="one" width="61" height="19" border="0"> </a><a href="URL" onMouseOver="imageChange('global','alt2','two','graphic2on')" onMouseOut="imageChange('global','alt0','two','graphic0')"><img src="elemente/zukunft.gif" name="two" width="68" height="19" border="0"> </a><a href="URL" onMouseOver="imageChange('global','alt3','three','graphic3on')" onMouseOut="imageChange('global','alt0','three','graphic0')"><img src="elemente/portfolio.gif" name="three" width="72" height="19" border="0"> </a><a href="URL" onMouseOver="imageChange('global','alt4','four','graphic4on')" onMouseOut="imageChange('global','alt0','four','graphic0')"><img src="elemente/kontakt.gif" name="four" width="67" height="19" border="0"></a>
<img src="elemente/verbindungen.gif" width="325" height="103">

<img src="elemente/willkommen.gif" width="500" height="330" name="global"></pre>
<pre>

<a href="URL"><img src="elemente/impressum.gif" width="60" height="14" border="0"></a></pre>

</center>

Nun wüsste ich gern, wie die Funktionalität weiterhin gewährleistet wird, nur dieser "Fehler auf der Seite." in der Statusleiste verschwindet.
Wenn ich einen Doppelklick auf der Statusleiste ausübe, erscheint mir dann eine Anmerkung, wie z.B.: "graphic1" ist undefiniert oder "undefined.src".

Für Hilfe bedanke ich mich im Voraus.

Grüße,
SL.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bilderwechsel

    SPX_25
    – Informationen zu den Bewertungsregeln

    Hallo!

    Ich hab erstmal die Tags und Klammerinhalte etwas eingerückt. Das gibt etwas mehr Übersicht. :-)

    Orginal:
    <SCRIPT LANGUAGE="JavaScript">
    {
     alt0 = new Image();
     alt0.src = "elemente/willkommen.gif";

    alt1 = new Image();
     alt1.src = "elemente/portrait.jpg";

    alt2 = new Image();
     alt2.src = "elemente/zukunft.jpg";

    alt3 = new Image();
     alt3.src = "elemente/portfolio.jpg";

    alt4 = new Image();
     alt4.src = "elemente/kontakt.jpg";
    }

    function imageChange(imageID,imageName,imageID2,imageName2,imageID3,imageName3,imageID4,imageName4)
    {
     {
      document.images[imageID].src = eval(imageName + ".src");
      document.images[imageID2].src = eval(imageName2 + ".src");
      document.images[imageID3].src = eval(imageName3 + ".src");
      document.images[imageID4].src = eval(imageName4 + ".src");
     }
    }
    </script>

    <center>
    <pre>
     <a href="URL" onMouseOver="imageChange('global','alt1','one','graphic1on')" onMouseOut="imageChange('global','alt0','one','graphic1')">
      <img src="elemente/portrait.gif" name="one" width="61" height="19" border="0">
     </a>
     <a href="URL" onMouseOver="imageChange('global','alt2','two','graphic2on')" onMouseOut="imageChange('global','alt0','two','graphic0')">
      <img src="elemente/zukunft.gif" name="two" width="68" height="19" border="0">
     </a>
     <a href="URL" onMouseOver="imageChange('global','alt3','three','graphic3on')" onMouseOut="imageChange('global','alt0','three','graphic0')">
      <img src="elemente/portfolio.gif" name="three" width="72" height="19" border="0">
     </a>
     <a href="URL" onMouseOver="imageChange('global','alt4','four','graphic4on')" onMouseOut="imageChange('global','alt0','four','graphic0')">
      <img src="elemente/kontakt.gif" name="four" width="67" height="19" border="0">
     </a>
     <img src="elemente/verbindungen.gif" width="325" height="103">
     <img src="elemente/willkommen.gif" width="500" height="330" name="global">
    </pre>
    <pre>
     <a href="URL"><img src="elemente/impressum.gif" width="60" height="14" border="0"></a>
    </pre>
    </center>

    Überarbeitete Version:
    <SCRIPT LANGUAGE="JavaScript">
    function imageChange(bildName,grafik)
    {
     window.document.images[document.images[bildName].name].src=grafik;
    }

    <center>
    <pre>
     <a href="URL" onMouseOver="imageChange('one','elemente/willkommen.gif')" onMouseOut="imageChange('one','elemente/portrait.jpg')">
      <img src="elemente/portrait.gif" name="one" width="61" height="19" border="0">
     </a>
     <a href="URL" onMouseOver="imageChange('two','elemente/willkommen.gif')" onMouseOut="imageChange('two','elemente/zukunft.jpg')">
      <img src="elemente/zukunft.gif" name="two" width="68" height="19" border="0">
     </a>
     <a href="URL" onMouseOver="imageChange('three','elemente/willkommen.gif')" onMouseOut="imageChange('three','elemente/portfolio.jpg')">
      <img src="elemente/portfolio.gif" name="three" width="72" height="19" border="0">
     </a>
     <a href="URL" onMouseOver="imageChange('four','elemente/willkommen.gif')" onMouseOut="imageChange('four','elemente/kontakt.jpg')">
      <img src="elemente/kontakt.gif" name="four" width="67" height="19" border="0">
     </a>

    <img src="elemente/verbindungen.gif" width="325" height="103">
     <img src="elemente/willkommen.gif" width="500" height="330" name="global">
    </pre>
    <pre>
     <a href="URL"><img src="elemente/impressum.gif" width="60" height="14" border="0"></a>
    </pre>
    </center>

    Die geschweiften Klammern oben hab ich rausgenommen. Da oben keine Funktion aufgerufen wird, sind sie irreführend und blähen die Datei nur unnötig auf (1Bit pro Zeichen). Gleiches bei der Funktion, wo zwei Klammern in Folge geöffnet und dann wieder geschlossen wurden.

    Als nächstes habe ich einen Dokumentaufruf für den Bildnamen gemacht. Der ist eindeutiger als die ID, da diese vom Browser vergeben wird. Mit dem Bildnamen kannst Du aber die Grafik explizit aufrufen.

    Die Funktion imageChange() erwartet jetzt außerdem nur noch zwei Werte und nicht acht, wie zuvor. Der eine ist der Bildname, welcher die zu ladende Grafik der Grafik zuweist, die den übergebenen Namen trägt und der andere ist der Grafiklink. Dieser wird "src" direkt zugewiesen.

    Als nächstes hab ich oben die vordefinierten Grafiken (alt0.src) weggenommen. Da Du in den Verweisen eh die Funktion aufrufst, kannst Du dort gleich auch die Grafiklinks mit angeben. Dann braucht der nicht noch neue Bildobjekte mit "new Image()" zu erzeugen. Die Grafiken werden dann in der Funktion "imageChange()" direkt geladen.

    Nun zu dem HTML-Teil. Hier habe ich die Funktionsaufrufe so verändert, daß nur noch der Bildname und der Link übergeben werden müssen. Mehr benötigt die Funktion nicht, um die neuen Grafiken zu laden.

    Da die Grafiken nun nicht mehr mit new Image() erzeugt, sondern direkt aufgerufen werden, wird diese Fehlermeldung wohl nicht mehr auftauchen.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln