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

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (reynum)