Changer de logo quand on passe le curseur dessus.

Bonjour,
Alors je souhaiterai mettre une image en logo et que quand on passe le curseur dessus sa affiche une autre image en faisant un fondu.
Auriez vous un code source?
SVP.
Merci
Modifié par hactogeek (19 Jun 2011 - 13:54)

J'en ai même plusieurs de codes sources tout fait :
ici (le meilleur) ou là (pas mal aussi)

Merci, je regarde.

Bonjour,

J'ai déplacé ce sujet dans l'un des forums techniques (questions générales et de débutants).

Pour l'effet souhaité, il y a plusieurs manières de faire ça:
- Avec une animation Flash (solution «historique»).
- Avec deux images de fond en CSS. Le problème dans ce cas c'est que a) on arrive vite sur des techniques qui présentent des problèmes d'accessibilité, et b) CSS ne permet pas à ma connaissance de faire des transitions entre deux images de fond. On peut contourner le deuxième problème en utilisant deux éléments imbriqués et placer une image de fond sur le conteneur pour l'état survolé, une image de fond sur le contenu pour l'état normal, et diminuer l'opacité du contenu lors du survol.
- Une technique qui peut être intéressante, c'est d'avoir une image dans le code HTML pour le logo, sous la forme <img alt="ACME" src="logo-acme-1.png">, et placer un logo-acme-2.png comme image de fond de l'élément qui contient cette image. Ensuite, au survol de l'élément IMG, on peut baisser son opacité (progressivement en utilisant les transitions CSS ou du JavaScript), jusqu'à 0 si nécessaire.

Et l'eau,

deux autres techniques en JS permettent de changer soit l'attribut src de l'image :

<h1><img src="uneImage.jpg" alt="texte alternatif explicite" id="imageDynamique" /></h1>

<script type="text/javascript">			
window.onload = function(){
	 var imageDynamique = document.getElementById("imageDynamique");
	if(imageDynamique){
		imageDynamique.onmouseover = function(){
			this.src = 'uneAutreImage.jpg';
			this.alt = 'un autre texte alternatif';
		}

		imageDynamique.onmouseout = function(){
			this.src = 'uneImage.jpg';
			this.alt = 'un texte alternatif';
		}
	}
}
                </script>

ou soit de changer le style des images :

<h1 id="logo"><img src="uneImage.jpg" alt="texte alternatif explicite" id="imageDynamique" /><img src="uneAutreImage.jpg" alt="autre texte alternatif explicite" id="imageDynamique2" /></h1>

<script type="text/javascript">			
window.onload = function(){
	 var imageDynamique = document.getElementById("imageDynamique");
	 var imageDynamique2 = document.getElementById("imageDynamique2");
	 var logo = document.getElementById("logo");
	if(imageDynamique && imageDynamique2 && logo){
		imageDynamique2.style.display = 'none'; //pour le fun étant donné que dans la css cela doit idem.
		logo.onmouseover = function(){
			imageDynamique.style.display = 'none';
			imageDynamique2.style.display = 'block';
		}

		logo.onmouseout = function(){
			imageDynamique.style.display = 'block';
			imageDynamique2.style.display = 'none';
		}
	}
}
                </script>

* code fait de tête. Il se peut qu'il y ait des coquilles. C'est juste pour donner des pistes à suivre
Modifié par niuxe (20 Jun 2011 - 20:38)

En faite j'avais pas vu l'histoire du fondu (erf, je sais que ce n'est pas encore vendredÿ). Donc toujours en js natif :

<h1 id="logo"><img src="un.jpg" alt="texte alternatif explicite" id="un" /><img src="deux.jpg" alt="autre texte alternatif explicite" id="deux" /></h1>

h1{position:relative;}
h1 img{position:absolute;top:0;left:0;}

function changeOpacite(id,opacite){

    var objet = document.getElementById(id).style;

    

    objet.opacity = (opacite / 100);

    objet.MozOpacity = (opacite / 100);

    objet.khtmlOpacity = (opacite / 100);

    objet.filter = "alpha(opacity="+opacite+"/100)";

}



function AnimOpacite(id,debut,fin,tempsMillisecondes){ 

    var vitesse = Math.round(tempsMillisecondes / 100);

    var timer = 0;

    if(debut < fin ){

        for(i = debut ; i <= fin ; i++){

            setTimeout("changeOpacite('"+id+"',"+i+")",(timer * vitesse ));

            timer++;

        }

    }else if(debut > fin){

        for(i = debut ; i >= fin ; i--){

            setTimeout("changeOpacite('"+id+"',"+i+")",(timer * vitesse ))

            timer++;

        }

    }

}

function imageOpacite(id,listeImage,debut,fin,tempsMillisecondes){

    var ex = document.getElementById(id);

    changeOpacite(listeImage[0],debut);

    changeOpacite(listeImage[1],fin);

    

    ex.onmouseover = function(){

        AnimOpacite(listeImage[1],debut,fin,tempsMillisecondes);

        AnimOpacite(listeImage[0],fin,debut,tempsMillisecondes);

    }

    ex.onmouseout = function(){

        AnimOpacite(listeImage[0],debut,fin,tempsMillisecondes);

        AnimOpacite(listeImage[1],fin,debut,tempsMillisecondes);

    }

} 



window.onload = function(){

    var listeImage = ['un','deux'];

    imageOpacite("logo",listeImage,1,100,700);

}

après toutes les techniques évoquées par Florent et moi, quelle serait la meilleur d'un point de vu accessibilité ? Merci par avance de vos réponses
Modifié par niuxe (20 Jun 2011 - 22:04)