[RESOLU] Changer une image par une autre grâce à Javascript.

16 avr. 2015, 20:18

Bonjour,

Je voudrais vous poser une question de nul car je comprends pas encore très bien les bases du js.
Je compte revoir mes bases de js de A à Z, mais comme ça ça risque de prendre beaucoup de temps
je voudrais bien que vous me donniez un petit coup de main en attendant pour que je puisse avancer
sur mon site.
Ne me dites donc pas que mon niveau en js est misérable: je le sais déjà

Voilà, j'ai une image sur mon site. Je voudrais qu'en passant le curseur de la souris dessus cette image puisse se subsituer à une autre, et qu'en sortant de la zone ce soit l'image initiale qui revienne.

Voici mon raisonnement:
J'ai mes deux images en html: représentées chacune par une balise <img ... />.
Dans la balise de l'une je mets un id et j'écris l'événement onmouseover = nouvelleImage();
Dans l'autre balise je mets un id et j'écris l'événement onmouseout = imageInitiale();
Je vais donc écrire mes deux fonctions dans mon entête:

Code : Tout sélectionner

<script type="text/javascript">
function nouvelleImage(){
// code pour mettre devant la première image. 
}

function imageInitiale(){
// code pour remettre en avant l'image initiale.
}
</script>

Je n'arrive pas à structurer mon code dans mes deux fonctions,
je ne sais donc pas trop quoi écrire, car je ne sais pas comment écrire le code de substitution.
Dois-je utiliser innerHTML (j'ai essayé mais en vain)?

Même si j'y arrive, il me semble qu'il me faudra écrire 1) dans ma fonction nouvelleImage
un code qui fasse que le navigateur lise la fonction seulement si l'image n'a pas encore changé,
et 2) dans ma fonction imageInitiale un code qui fasse que le navigateur lise la fonction seulement si l'image
a déjà changé.
Qu'en pensez-vous?

Quand aux id dans les images, ils serviraient à récupérer le contenu de la balise de l'image dans l'entête,
c'est ça?

Quelqu'un peut m'aider?

16 avr. 2015, 20:45

16 avr. 2015, 21:23

Bonjour,
Voici une solution utilisant les styles CSS pour animer une image quand l'utilisateur la pointe (événement HOVER)
Je veux dire qu'on a pas besoin de JavaScript pour ça.

Exemple : anim_image.html

Code : Tout sélectionner

<style>
.image1 {
	background : url('images/img1.jpg') no-repeat;
	width : 200px;
	height : 200px;
}
.image1:hover{
	background : url('images/img2.jpg') no-repeat;
	width : 200px;
	height : 200px;
}
</style>
<div class="image1"></div>

Explications:
La première classe de style ".image1" :

Code : Tout sélectionner

.image1 {
	background : url('images/img1.jpg') no-repeat;
	width : 200px;
	height : 200px;
}

Permet de donner les dimensions et le contenu de l'image qui sera affichée par défaut dans le cadre (DIV) prévu pour ça en bas du code HTML.

La seconde classe ".image1:hover" :

Code : Tout sélectionner

.image1:hover{
	background : url('images/img2.jpg') no-repeat;
	width : 200px;
	height : 200px;
}

Définit le style qui sera appliqué dans le cas où l'utilisateur pointe (HOVER) l'objet, dans ce cas on applique les mêmes dimensions et une autre image comme contenu. Ce qui remplacera l'image précédemment appliquée par le style par défaut ".image1"

Le DIV ou cadre :

Code : Tout sélectionner

<div class="image1"></div>

Est prévu pour contenir les images appliquées par les 2 classes de styles ".image1" et ".image1:hover" c'est pour cela qu'on a déclaré le nom du style "image1" comme classe de ce cadre.

17 avr. 2015, 08:35

Merci, ça marche super bien!!

Merci aussi pour tout le temps passé

17 avr. 2015, 08:39

Par contre, je ne sais pas comment mettre le message comme résolu.
Quelqu'un peut m'indiquer comment faire?

17 avr. 2015, 15:48

J'ai trouvé c'est bon: tout en haut à gauche à côté du nombre de messages.

[RESOLU] Changer une image par une autre grâce à Javascript.

Qui est en ligne