Sujet : Changement d'image avec attr() et option "slow"

Bonjour au forum,

Le logo de mon site change au passage de la souris grâce au code suivant :

<div id="logo"><a href=""><img src="logo.png" id="logon "alt="" width="150px" height="150px" /></a></div>

<script type='text/javascript'>
$('#logo').mouseover(function() {
    $('#logon').attr('src','multimedias/images/logo_nb.png');
});
     
$('#logo').mouseout(function() {
    $('#logon').attr('src','multimedias/images/logo.png');
});
</script>

Vu que le changement des images est un peu brut, j'aimerais ajouter un fadeIn ou fadeOut "slow" mais ne sais pas comment m'y prendre.

Auriez-vous une idée ?

Un grand merci !

Re : Changement d'image avec attr() et option "slow"

Tu superpose tes 2 logo et tu fait disparaitre celui que tu veux au passage de la souris

<style>
#logo{
position:relative;
}
#logon, #logon2{
position: absolute;
}
#logon{
z-index:20;
}
#logon2{
z-index:10;
}


</style>
<div id="logo">
<a href="">
<img src="logo.png" id="logon "alt="" width="150px" height="150px" />
<img src="logo.png" id="logon2 "alt="" width="150px" height="150px" />

</a>
</div>

<script type='text/javascript'>
$('#logo').mouseover(function() {
    $('#logon').fadeOut('slow');
});
     
$('#logo').mouseout(function() {
    $('#logon').fadeIn('slow');
});
</script>

3

Re : Changement d'image avec attr() et option "slow"

Merci jarodxxx pour ce retour rapide. J'ajoute une contrariété. Les images sont des png en partie transparente, ce qui fait que  #logon2 doit être invisible par défaut.... Sorry...