Hintergrund "blitzt" bei Mouseover - Javascript

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo Zusammen,

ich verwende ein einfaches Javascript, welches das Hintergrundbild bei mouseover eines Image (hier „Logo“) ändert. Das klappt soweit gut, jedoch blitzt das Hintergundbild beim ersten hover. Im Internet habe ich schon gelesen, dass es bei diesem Javascript keine Möglichkeit gibt das zu „faden“. Gibt es evtl. ein anderes Script welches ich verwenden kann? Am liebsten wäre mir ein sanfter Übergang. Es sollen mehrere „Logos“ abgebildete werden, die je iene amdere Grafik im Hintergrund zeigen.
Hier mein Code:

<div id=„bildhinten“ >

<a href="#" onmouseover=„swapBackground(‚images/logo.png‘);“ onmouseout=„swapBackground(‚images/bildhinten2.png‘);“> <img src=„http://forum.chip.de/images/mein_logo.png“ /></a>

function swapBackground(strImg) {
document.getElementById(‚bildhinten‘).style.backgr oundImage = „url(“+strImg+")" ;
document.getElementById(‚bildhinten‘).style.backgr oundSize = "100% ";
}

Vielen Dank im Voraus!

#2

JQuery

#bilder img {
display:block;
position:absolute;
top: 0;
left: 0;
}

$( document ).ready(function() {
/* elemente verbergen */
$(’.out’).hide();
$(’.over’).hide();
/* default elemente anzeigen */
$(’.def’).show();
/* bilder container funktionen festlegen */
$(’#bilder’)
.mouseenter(function() {
$(’#def’).fadeOut(‚slow‘);
$(’#over’).fadeIn(‚slow‘);
})
.mouseleave(function() {
$(’#over’).fadeOut(‚slow‘);
$(’#out’).fadeIn(‚slow‘);
});
});