Petit script de changement (commutation) d'image en fonction d'un evenement

Soyez le premier à donner votre avis sur cette source.

Vue 9 971 fois - Téléchargée 698 fois

Description

Ce code très simple permet de permuter deux images soit pour faire un effet interrupteur soit pour un survol avec la souris ou bien d'autres applications d'ailleur.

Source / Exemple :


<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script language="javascript" type="text/javascript">

//change d'une image a une autre (effet interupteur)
function commuteImg(img1, img2, name)
{	
var src_btn = eval("document."+name+".src");
var str1 = src_btn.substring(((src_btn.length)-(img1.length)), src_btn.length);

	if (img1 == str1) 
	{var tmp = eval("document."+name); tmp.src = img2;}
	
	else 
	{var tmp = eval("document."+name); tmp.src = img1;}

}

</script>
</head>
<body>

<!--Exemple 1 -->
<img src="imgs/butn_tv_on.png" name="BTN_TV" onMouseover="commuteImg('imgs/butn_tv_on.png','imgs/butn_tv_off.png','BTN_TV')" onMouseOut="commuteImg('imgs/butn_tv_on.png','imgs/butn_tv_off.png','BTN_TV')">

<br />

<!--Exemple 2 -->
<img src="imgs/butn_tv_on.png" name="BTN_TV_2" onClick="commuteImg('imgs/butn_tv_on.png','imgs/butn_tv_off.png','BTN_TV_2')">

</body>
</html>

Conclusion :


Bien entendu il vous faut deux images mais surtout vos images doivent chacunes avoir un argument name"" différent.
Syntaxe lors de l'appel de la fonction : commuteImg('image_origine', 'image_a_changer', 'nom_de_l_image')
Et voilou simple et efficace.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_x_mec
Messages postés
63
Date d'inscription
mercredi 25 août 2004
Statut
Membre
Dernière intervention
19 février 2008
-
Et l'attribut name commence à être déprécié, tu devrais utilisé l'attribut id (avec getElementById()).

Et donc, comme l'a dis RAMBC, le over et out deviennent inutiles à cause du css.

Ta fonction pourrait ètre plus simple:

---------------------------------------------
var src_btn;
function commuteImg(img1, nom){
if(nom.getAttribute("src") == img1){
nom.setAttribute("src", src_btn);
}else{
src_btn = nom.getAttribute("src");
nom.setAttribute("src", img1);
}
}
---------------------------------------------
Et donc




Bon c'est fait à l'arrache mais ça devrait fonctionner.
rambc
Messages postés
224
Date d'inscription
mercredi 21 avril 2004
Statut
Membre
Dernière intervention
29 mars 2009
-
Tu marques un point car je n'avais pas pensé à cela (vu que je n'ai pas encore eu à l'utiliser). Du coup cela peut effectivement être utile (et je m'en servirais sûrement à l'avenir).
reynum
Messages postés
7
Date d'inscription
lundi 13 novembre 2000
Statut
Membre
Dernière intervention
12 juillet 2011
-
mais ça ne marche pas pour les cliks de souris
reynum
Messages postés
7
Date d'inscription
lundi 13 novembre 2000
Statut
Membre
Dernière intervention
12 juillet 2011
-
Je l'ignorais => merci !!
rambc
Messages postés
224
Date d'inscription
mercredi 21 avril 2004
Statut
Membre
Dernière intervention
29 mars 2009
-
La propriété HOVER des CSS permet de faire cela sans difficulté (et surtout sans JavaScript).

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.