Mouseover mit anschließender Verzögerung

[splinter]

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