Rollover effekt bei bildern

Dieses Thema im Forum "Web-Know-how für die Homepage" wurde erstellt von mannyk, 24. April 2004.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. mannyk

    mannyk Halbes Megabyte

    Registriert seit:
    6. Juli 2000
    Beiträge:
    590
    Hi!
    Wenn ich den Rollover effekt verwende (anderes bild wird beim draufzeigen angezeigt), erscheint für einen Bruchteil einer sekunde die Sanduhr als Mauszeiger? Wieso können die Bilder nicht schon vorher geladen werden?
    Habe zwar im im body-tag mit onload gearbeitet, aber es ist eben noch nicht perfekt!
    mfg,
    mannyk
     
  2. Gast

    Gast Guest

    haste die seite online?

    dann schmeiss mal die url auf dem markt

    ansonsten schick sie mal als zip
     
  3. mannyk

    mannyk Halbes Megabyte

    Registriert seit:
    6. Juli 2000
    Beiträge:
    590
    Tut mir leid, dass habe ich überlesen!

    Jedenfalls klappt es jetzt. Auch wenn leider immer noch die Sanduhr erscheint.
    Es ist also nicht besser als mit meiner alten Methode.
    Komischerweise hat das ganze super geklappt, als ich es in einer kleinen seite ausprobiert hatte. Als ich es jetzt aber in meine website übernommen habe, ist eben wieder die Sanduhr sichtbar.

    Außerdem ist es mir nicht gelungen, den effekt bei einem Bild, das als Schaltfläche fungiert, anzuwenden.

    Habt ihr noch einen Tipp für mich?
    mfg,
    mannyk
     
  4. Gast

    Gast Guest

    jo so is es!

    wenn du deine html datei aufrufst, siehste die programmzeilen....

    nun zähl einfach die img befehle, die VOR dem ersten button liegen. (beim zählen mit NULL anfangen)

    wenn jetzt 5 bilder vor dem button sind, so ist der funktionsaufruf als "chg(5,n1)".
    sind 10 bilder davor ist es "chg(10,n1)", usw....

    !!! wichtig !!!

    es werden nicht die bilder gezählt, wie sie nachher angezeigt werden, sondern wie sie programmiert sind!
     
  5. gerald_b

    gerald_b Kbyte

    Registriert seit:
    15. Januar 2003
    Beiträge:
    259
    Hi,

    ich mische mich mal ein. Beim Aufruf von chg(0,o1) besagt der erste Parameter in der Klammer den Index des Bildes im Dokument. 0 steht dabei für das erste, 1 für das zweite, usw.

    In dieser Zeile

    window.document.images[nr].src = obj.src

    steht der entsprechende Verweis zum anzusprechenden Objekt.

    Für das zweite Bild solltest Du also folgendes verwenden:

    onMouseOut="chg(1,n1)"
    onMouseOver="chg(1,o1)"
    onMouseDown="chg(1,d1)"
    onMouseUp="chg(1,o1)">


    Im Übrigen hat Michael dies auch schon im Text genannt.


    Gruß

    Gerald
     
  6. mannyk

    mannyk Halbes Megabyte

    Registriert seit:
    6. Juli 2000
    Beiträge:
    590
    @Michael_x: Danke! Genauso meinte ich das.
    Habe dein Script ausprobiert, welches auch super funktioniert.
    Allerdings nur, wenn das rollover bild das einzige bild in der seite ist.
    Ist ein zweites, ganz normales, bild eingebunden wird nur dieses angesprochen

    Wenn also im Body-tag vor dem rolloverbild noch ein anderes drin ist, wird nur bei Diesem das Bild geändert.

    Z.B.
    <img src="ganz_normales_bild.jpg" width="9" height="9">

    ...
    ...

    <a href="link.html"
    onMouseOut="chg(0,n1)"
    onMouseOver="chg(0,o1)"><img src="normal.gif"></a>

    Hier wird eben immer das bild 'ganz_normales_bild.jpg' geändert und nicht das Bild 'normal.gif'.

    Das Script wäre super, wenn es diese Macke nicht hätte.
    Villeicht findest du ja den Fehler.
    mfg,
    mannyk
     
  7. Gast

    Gast Guest

    du willst ein rollover image erzeugen, welches beim überfahren des links ein anderes bild zeigt. dies bild soll SOFORT erscheinen?

    wenn ja dann:

    <script type="text/javascript">

    n1 = new Image();
    n1.src = "bild1_normal.jpg";
    o1 = new Image();
    o1.src = "bild1_over.jpg";
    d1 = new Image();
    d1.src= "bild1_down.jpg";

    n2 usw..... (für mehrere Buttons)


    function chg(nr,obj)
    {
    window.document.images[nr].src = obj.src;
    }
    </script>

    <body>
    <a href="link.html"
    onMouseOut="chg(0,n1)"
    onMouseOver="chg(0,o1)"
    onMouseDown="chg(0,d1)"
    onMouseUp="chg(0,o1)"><img src="bild1_normal.jpg"></a>

    Beim Funktionsaufruf chg werden 2 Variable übergeben. Einmal die 0 (Null) und einmal n1, o1 (Oh), d1. Die Null gibt die Bildnummer in der HTML an. Sollte vorher diesem Link noch ein andererer IMG Tag stehen, so wird aus der Null eine 1. Mit den anderen Variablen übergibtst du den jeweiligen Befehl für die entsprechenden Garfiken.

    Da die Grafiken nicht in der FUNCTION stehen, werden sie beim laden der HTML gleich mitgeladen.

    Meine Vorredner sprechen vor einem Preloader. Dies funktioniert nicht immer. Vorallem Seiten mit einem großen grafischen Anteil haben damit ihre Schwierigkeiten. Diese Preloader finde ich absolut ungeeignet.
     
  8. Rainer04

    Rainer04 Megabyte

    Registriert seit:
    3. April 2004
    Beiträge:
    1.125
    Versuche es mal so:

    <img src="bildername.jpg" style="display:none" />

    Ich weiß leider nicht, ob diese Methode von jedem Browser unterstüzt wird.
     
  9. basti2003

    basti2003 Byte

    Registriert seit:
    3. September 2002
    Beiträge:
    103
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen