Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

PETIT SCRIPT DE CHANGEMENT (COMMUTATION) D'IMAGE EN FONCTION D'UN EVENEMENT


Information sur la source

Catégorie :Graphique Classé sous : images, changement, commutation, loading, interrupteur Niveau : Débutant Date de création : 23/05/2007 Vu / téléchargé: 5 340 / 450

Note :
7,5 / 10 - par 2 personnes
7,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note

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

  • <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>
<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.
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de rambc le 24/05/2007 11:44:40

La propriété HOVER des CSS permet de faire cela sans difficulté (et surtout sans JavaScript).

signaler à un administrateur
Commentaire de reynum le 24/05/2007 14:03:41

Je l'ignorais => merci !!

signaler à un administrateur
Commentaire de reynum le 24/05/2007 14:04:33

mais ça ne marche pas pour les cliks de souris

signaler à un administrateur
Commentaire de rambc le 24/05/2007 14:42:36

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).

signaler à un administrateur
Commentaire de x_mec le 28/05/2007 10:34:37

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
<img src="image1.gif" onclick="commuteImg('image2.gif',this)">



Bon c'est fait à l'arrache mais ça devrait fonctionner.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

changement d'images [ par bob ] salut tout le monde ! existe il un script qui permet d'avoir une image qui change toutes les 10 secondes sur une page ? je ne veut pas r&#233;actuali changement de src [ par paolinardc ] Bonjour !J'ai écrit un script qui permet de changer le src de plusieurs images (document.images[n°balise].src="") sur un évènement onClick. Tout march une diaporama des images avec l’audio avec javascript [ par a_moukriss ] bonjour j'espere quie je suis dans le bon endroi pour poster ma question ! je veux realiser une diaporama (avec javascript)des images avec l'audio q Préchargement images [ par jmtoulon ] Bonjour,je suis en train de créer un site de jeu de carte.Je fais une function qui pré charges les images de toutes les cartes de jeu (52)je voudrais Diaporama [ par daddou1707 ] est ce possible de créer un diaporama qui affiche un ensemble des images situer dans un dossiers. j'ai pu faire un diaporama qui s'affiche dans un pag Chargement d une image [ par adakick ] Bonjour, Sur mon site j'ai des images assez lourde et je voudrais qu'en attendant que ces images se chargent en affiché d autre du genre : <img title align ne fonctionne pas [ par Nitruk ] BonjourVoilà un problème qui tient plus du html que du javascript  :  j'ai un div que je veux aligner à droite j'ai doncfixé son attribut align à righ Select + images [ par Neill ] Bonjour,Est il possible de faire un select qui affiche une image par rapport au nom des différents select ??Exemple :&lt;select name="news" size="1"&g probleme d'envoi page html par mail [ par rmic210282 ] Bonjour a tous,voilà , j'ai un petit soucis : j'aimerai envoyer un page html avec des images par mail ( les images se trouvent sur un serveur). Le pro Control de select et changement de valeur [ par ktastrof ] Bonjour, Voila j'ai dans un formulaire une checkbox qui contrôle 3 select. Au chargement de la page les selects sont disabled et en cochant le checkb


Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Appels d'offres

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 1,201 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.