begin process at 2010 02 10 11:15:45
  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é :6 758 / 541
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 STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard
MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture OGG MEDIA PLAYER par kazma
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

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 Zip DIAPORAMA 360° V2 MOUVEMENT DANS LES QUATRE SENS ROTATION VA... par abdelaziz_info
Source avec Zip DIAPORAMA 360 DEGRÉ COMPLET ET TOUT AUTOMATIQUE QUATRE VITES... par abdelaziz_info
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 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...

Comparez les prix


HTC Tattoo
Entre 9€ et 329€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
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 : 0,827 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)