basty: Mouseover mit anschließender Verzögerung

´nabend zusammen...

suche als kleinen Effekt folgendes für die HP:

Beim Überfahren eines Bilder mit der Maus, soll ein anderes geladen werden (dunkler). Wenn man die Maus wegnimmt, soll das Bild jedoch noch so 2 Sek. stehen bleiben, bevor das andere wieder geladen wird.
Schön wäre es noch, wenn man das ganze nicht über <a href... einbinden müsste, find das ´n bissl blöd mit der "Hand" und so.

Ach ja, im Grunde sollte das ganze ein transparentes Bild werden, über CSS. Aber ob man das alles soooo kombinieren kann....

thanxx

  1. Moin

    Wenn man die Maus wegnimmt, soll das Bild jedoch noch so 2 Sek. stehen bleiben, bevor das andere wieder geladen wird.

    Empfehlung: window.setTimeout() per onmouseout starten.

    Schön wäre es noch, wenn man das ganze nicht über <a href... einbinden müsste, find das ´n bissl blöd mit der "Hand" und so.

    onmouseover/out funktioniert auch mit anderen Tags!

    Ach ja, im Grunde sollte das ganze ein transparentes Bild werden, über CSS.

    ?????

    Gruß
    rfb

  2. Beim Überfahren eines Bilder mit der Maus, soll ein anderes geladen werden (dunkler). Wenn man die Maus wegnimmt, soll das Bild jedoch noch so 2 Sek. stehen bleiben, bevor das andere wieder geladen wird.

    var obj=null;
    var url=new Array();
     url[0]="http://.....bild1";
     url[1]="http://.....bild2";
    function rollover(x, img) {
     obj=img;
     if (x) changeSrc(1);
     else t=setTimeout("changeSrc(0)", 2000);};
    function changeSrc(x) {
     obj.src=url[x];};

    Schön wäre es noch, wenn man das ganze nicht über <a href... einbinden müsste, find das ´n bissl blöd mit der "Hand" und so.

    <img class="opacity" onmouseover="rollover(1, this)" onmouseout="rollover(0, this)" src="http://.....bild1" />

    Ach ja, im Grunde sollte das ganze ein transparentes Bild werden, über CSS. Aber ob man das alles soooo kombinieren kann....

    img.opacity {
     opacity: 0.5;
     filter: alpha(opacity=50);}

    opacity für FF
    filter für IE