begin process at 2012 02 11 04:55:55
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

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

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


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :images, changement, commutation, loading, interrupteur Niveau :Débutant Date de création :23/05/2007 Vu / téléchargé :8 359 / 605
Auteur : reynum

Ecrire un message privé
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip UNE HEURE GRAPHIQUE SIMPLE EN JAVASCRIPT
Toutes les sources de reynum

 Sources de la même categorie

Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS par kazma
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture SCRIPT DE PRÉCHARGEMENT D'IMAGES par heycraft
Source avec Zip Source avec une capture FAIRE DEFILER DES IMAGE A LA MOLETTE OU SOURIS par kazma
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec une capture BAR DE STATUS POUR LE CHARGEMENT DES IMAGES AVEC POURCENTAGE... par wizard512

Commentaires et avis

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

Commentaire de reynum le 24/05/2007 14:03:41

Je l'ignorais => merci !!

Commentaire de reynum le 24/05/2007 14:04:33

mais ça ne marche pas pour les cliks de souris

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

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 Changement Image à intervalle régulier : probléme fluiditée [ par thierryd75 ] Bonjour, J'ai trouvé ce bout de code sur internet qui peu servir à tous et permet de faire défiler des images, clicable à intervalles réguliers (exce Switch d image avec un "Select" [ par pl4hs ] Bonjour tout le monde, Je viens a vous car je me trouve coincer dans le développement de mon site web. Voila la situation: J'ai une base de données Images sur site internet avec a textarea [ par gardorheian23 ] Bonjour, je m'explique, j'essaye de rendre un site assez simple pour qu'une amie puisse le gerer entièrement. Pour ce faire je lui ai mis un textare [Javascript] Superposition images [ par thomas3347 ] Bonjour à tous, Je cherche un petit code en javascript qui me permet de superposer 5 images png de même taille (pour utiliser la transparence)sur une Fond d'écran avec images fondu enchaîné [ par fanzi ] Bonjour, J'ai trouvé sur ce forum ce script suivant(il n'est pas de moi, mais de kazma): body{ background:url(1.jpg); } var compteur=0 tbimage=n Changer une image de référence d'une map [ par nulenC ] Bonjour, Je suis nouveau sur ce forum, donc si je n'ai pas inscrit ma demande dans la bonne rubrique, n'hésitez pas à la déplacer. [^^happy13] Reven Incrementation d'un input au clique d'images [ par Tipx1 ] Bonjour à tous, J'ai dans le cadre d'un projet réaliser une petite page web en html/css, seulement je dois ajouter une fonction JavaScript que je ne compte à rebours avec changement d'image [ par ravid87 ] Bonsoir, voila j'ai un petit problème, le grand maître Yoogle n'a pas su me répondre précisément [^^sad1], enfaite je voudrais intégrer une image qui


Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy Tab (GT-P1000) Tablet PC
Entre 699€ et 699€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Beautiful woman in a bikini meditating on the beachPhoto Single Large Rock Formation in Monument Valley
Photo Happy Bright Landscape WIth Butterflies 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,260 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)