Peter: suche zuverlässigen Rollover mit JavaScript

SELF-Forum

suche zuverlässigen Rollover mit JavaScript

Peter
– Informationen zu den Bewertungsregeln

Hallo,
sicher kein großes Problem.
Ich suche einen zuverlässigen und allseitig kompatiblen Rollover.
Ziel: mehrere Austauschgrafiken auf einer Seite
Anforderungen:
1. Rollover sollte sofort zur Verfügung stehen (New Image Tag?)
2. bis Browserkompatibel ab Version 3 aufwärts
3. ältere Browser müssen abgefangen werden und erhalten keinen Rollover
4. möglichst kurz und simpel mit verständlichen Variablen

Wer hat hierfür ein gutes Beispiel oder weiß einen guten Link?
Vielen Dank
Peter

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. suche zuverlässigen Rollover mit JavaScript

    Stefan Muenz
    – Informationen zu den Bewertungsregeln

    Hallo Peter

    <html>
    <head>
    <title>Seitentitel</title>
    <script language="JavaScript">
      <!--
    if(document.images)
    {
      Normal1 = new Image();
      Normal1.src = "button1a.gif"; /* Hier erste Standard-Grafik angeben */
      Highlight1 = new Image();
      Highlight1.src = "button1b.gif"; /* Hier erste Highlight-Grafik angeben */

    Normal2 = new Image();
      Normal2.src = "button2a.gif"; /* Hier zweite Standard-Grafik angeben */
      Highlight2 = new Image();
      Highlight2.src = "button2b.gif"; /* Hier zweite Highlight-Grafik angeben */

    /* usw. fuer alle weiteren zu benutzenden Grafiken */
    }

    2* function Bildwechsel(Bildnr,Bildobjekt)
      {
       if(document.images)
       {
        window.document.images[Bildnr].src = Bildobjekt.src;
       }
      }
    //-->
      //-->
    </script>
    </head>
    <body>

    3* <table><tr><td>
    <a href="index.htm" onMouseOver="Bildwechsel(0,Highlight1)"
    onMouseOut="Bildwechsel(0,Normal1)">
    <img src="button1a.gif"></a>
    </td><td>
    <a href="verweise.htm" onMouseOver="Bildwechsel(1,Highlight2)"
    onMouseOut="Bildwechsel(1,Normal2)">
    <img src="button2a.gif"></a>
    </td></tr></table>

    </body>
    </html>

    Vielleicht kommst Du ja klar damit.

    viele Gruesse
      Stefan Muenz
    (ich habe das Beispiel kopiert und nicht zu SELFHTML gelinkt, weil ich es hier noch um die Anforderung "alte Browser abfangen" erweitert habe).

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. suche zuverlässigen Rollover mit JavaScript

      Christine Kuehnel
      – Informationen zu den Bewertungsregeln

      Hallo Stefan,

      ich muss da mal was ergaenzen: <g>

      Highlight1 = new Image();
       ...
       <a href="index.htm" onMouseOver="Bildwechsel(0,Highlight1)"

      (ich habe das Beispiel kopiert und nicht zu SELFHTML gelinkt, weil ich es hier noch um die Anforderung "alte Browser abfangen" erweitert habe).

      und im Eifer des Gefechtes beim schnell mal Tippen was uebersehen.
      So, wie das aufgebaut ist, reicht es nicht, mit if(document.images) die "kritischen Teile" in der Funktion zu umgehen, will man die "Alten" draussen zu lassen.
      Dummer Weise wird beim Aufruf der Funktion  bei mouseover so ein nicht vorhandenes Objekt angesprochen (z.B. Highlight1).
      Eine der Moeglichkeiten:
      if(document.images)
      {
        /* wie angegeben */
      }
      else
      {
        Highlight1 = null;
        Highlight2 = null;
      }

      Christine

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. suche zuverlässigen Rollover mit JavaScript

        Stefan Muenz
        – Informationen zu den Bewertungsregeln

        Hallo Christine,

        danke fuer die Ergaenzung - das werde ich dann so auch mal in das Beispiel einbauen! Scheinbar stuerzt sich naemlich vor allem die MSIE3-Gemeinde immer zuerst ausgerechnet auf dieses Beispiel <g>

        viele Gruesse
          Stefan Muenz

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln