begin process at 2012 05 29 02:44:52
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

Alterner deux images


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Alterner deux images

lundi 12 octobre 2009 à 21:08:38 | Alterner deux images

CyricFirehands

Bonjour,

Je suis en train de coder un site internet, pour mon petit plaisir, or en essayant de coder une fonction Javascript, je me heurte a quelques problème, et je suis pas assez calé pour m'en dépêtrer par moi même.

J'ai donc besoin de vous ^^

Donc dans l'idée, j'ai un site qui fonctionne sur une seule page, par affichage de div suivant le clic sur un bouton (pour faire rapide)

le site est divisé en trois parties, la bannière, le menu gauche, et l'affichage du texte, suivant un modèle éprouvé....

Mon soucis est que je voudrais qu'a chaque clic sur un élément du menu de gauche (qui fait apparaitre le texte correspondant à droite) une petite image change de couleur, cette image agirait en quelque sorte comme une puce de mise en page, chaque élément du menu de gauche a son image en "Gris" et je voudrais qu'au clic sur un élément, cette image devienne "Verte".
Je dispose bien évidemment des deux image, et jusqu'alors j'utilisai une fonction javascript a base de "if" et de "document.getElementById("id").innerHTML="<img src='....' >"

Et tout fonctionne bien, le soucis c'est que pour que toute mes images repassent en gris lors du clic sur l'une d'elle, je suis obligé de mettre 11 lignes identiques (puisqu'il y a 11 "boutons" a gauche) dont une prends le chemin de l'image verte.

C'est cool, c'est beau, mais a la première visite sur le site, ce me recharge toute les images, et ce, de façon très très visible.

Je voulais savoir si il n'existait pas une méthode pour contourner ce problème, car visiblement si je charge la page une fois, et que je l'actualise, le problème disparait.


En espérant avoir été clair, sinon, demandez moi le code.

Cordialement

Cyric
mardi 13 octobre 2009 à 12:18:17 | Re : Alterner deux images

Bul3

Membre Club
Bonjour,

_ pourquoi passer par innerHTML ?
changer directement le src de l'image

_ si j'ai compris, à un moment donné
seul 1 image peut-être verte (?)
alors, pourquoi remettre en gris celles
qui le sont déjà ?
mémorisez celle qui est en vert, il
vous suffit alors de ne changer que
celle là, du style :
Code Javascript :
var prec=document.getElementById("id de l'image 1");
// pour le cas 1ère fois et éviter un test dans la fonction
....
function metenvert(quoi)
{	prec.src="image grise";
	prec=quoi;
	prec.src="image verte";
}

Cordialement [mon Site] [M'écrire] Bul
mardi 13 octobre 2009 à 13:29:45 | Re : Alterner deux images

CyricFirehands

Merci de votre attention,

En effet, je cherche a faire en sorte que l'image dans le menu "marque" le choix actif, en gros si accueil est cliqué, on passe son image de gris a vert,

Le problème c'est qu'alors, j'ai 11 images différentes grise, qu'il faut remplacer par une verte lors du clic sur la div la contenant (en gros)

Parce que la votre fonction me semble ne fonctionner que dans le cas ou j'ai une seule image, non ?
mardi 13 octobre 2009 à 13:50:19 | Re : Alterner deux images

Bul3

Membre Club
ben non...
on appelle la fonction, avec en paramètre
l'image en mettre en vert,
donc infinité d'images possibles

>>j'ai 11 images différentes grise, qu'il faut remplacer
>>par une verte lors du clic sur la div la contenant
>>(en gros)
ah ? le problème, s'il est bien exprimé (!?!??)
est différent de ce que j'ai compris alors ???
11 images contenus dans un div
qu'il faut modifier en vert...
toutes ?
et où sont celles à repasser en gris ?
mardi 13 octobre 2009 à 13:52:48 | Re : Alterner deux images

Bul3

Membre Club
et j'avoue ne pas suivre...
>..11 images différentes..
>...sur la div la contenant
la ? une alors ? mais vous ne parlez pas de 11
mardi 13 octobre 2009 à 14:01:34 | Re : Alterner deux images

Bul3

Membre Club
Code HTML :
exemple avec 3 images....
<body>
	<a href="javascript:met(document.getElementById('img1'));">1</a>
	<a href="javascript:met(document.getElementById('img2'));">2</a>
	<a href="javascript:met(document.getElementById('img3'));">3</a><br />
	<img src="btn green.gif" id="img1" />
	<img src="btn green.gif" id="img2" />
	<img src="btn green.gif" id="img3" />
	<script>
		var prec=document.getElementById("img1");
		function met(quoi)
		{	prec.src="btn green.gif";
			prec=quoi;
			prec.src="btn red.gif";			
		}
	</script>
</body>

bien entendu, à adapter à ce que vous faites...
mardi 13 octobre 2009 à 14:04:26 | Re : Alterner deux images

CyricFirehands

Je vais essayer d'etre clair ^^

En fait le plus simple c'est d'aller jeter un oeil au site en chantier

http://www.lemonrepro.com/FTP/Website/

l'idée c'est de faire en sorte que le site ne soit qu'une seule et même page.

Pour cela tout est caché, et ne s'affiche qu'au clic sur les élément du menu de gauche

Le menu étant une grosse div (pour appliquer le style du web-design)
et les éléments cliquable sont des div contenant l'image grise et le texte correspondant au "bouton"

J'ai donc au final 11 "boutons" et je voudrais qu'au clic sur l'un d'entre eux, l'image grise devienne verte.
Ce que je réalisai jusqu'alors via des innerHTML.

Mon soucis c'est qu'a la première visite le script a un comportement innattendu, et charge toute les images a chaque clic. et ce de façon très visible, donc pas très joli.
mardi 13 octobre 2009 à 14:06:46 | Re : Alterner deux images

Bul3

Membre Club
j'ai cru voir "cliquer sur l'élément",
ça ne change pas grand chose :
Code HTML :
<body>
	<img src="btn green.gif" onclick="met(this);" id="img1" />
	<img src="btn green.gif" onclick="met(this);" id="img2" />
	<img src="btn green.gif" onclick="met(this);" id="img3" />
	<script>
		var prec=document.getElementById("img1");
		function met(quoi)
		{	prec.src="btn green.gif";
			prec=quoi;
			prec.src="btn red.gif";
		}
	</script>
</body>
mardi 13 octobre 2009 à 14:09:18 | Re : Alterner deux images

Bul3

Membre Club
croisement des messages,
et j'ai, par avance, répondu, me semble-t-il à
>>J'ai donc au final 11 "boutons" et je voudrais
>>qu'au clic sur l'un d'entre eux, l'image grise
>>devienne verte
mon exemple c'est rouge et vert
et 3 boutons seulement....
mardi 13 octobre 2009 à 14:17:16 | Re : Alterner deux images

Zobibol

Membre Club
Bonjour je ne sais pas si j'ai tout suivi (ou plutôt (le chien de Mickey) compris)
Mais il est même possible d'avoir n image:

Code HTML :
<html>
<head>
	<script>
		function changePict(_obj){
			// récupération de toutes les images de la div
			var _imgs = document.getElementById("divContent").getElementsByTagName("img");
			// parcours les images.
			for ( var i=0; i< _imgs.length; i++){
				// si l'identifiant de l'image est différente de l'objet passé en paramètre et que sa source n'est pas "grise" alors on la passe en gris.
				if( _imgs[i].id != _obj.id && _imgs[i].src != "silver.png"){
					_imgs[i].src = "silver.png";
				}
				// si l'identifiant de l'image est la même que celle passée en paramètre alors on la passe en vert.
				if (_imgs[i].id == _obj.id ){
					_imgs[i].src = "green.png";
				}
			}
		}
	</script>
</head>
<body>
<div id="divContent">
	<img onmousedown="changePict(this)" id="first" src="silver.png" />
	<img onmousedown="changePict(this)" id="second" src="silver.png" />
	<img onmousedown="changePict(this)" id="third" src="silver.png" />
</div>
</body>


cela ne suffirait-il point ?
Quand à l'utilisation du css il serait peut être bon d'y jeter un oeil avec la balise a non ?


[o-_-o]

1 2

Cette discussion est classée dans : images, clic, site, image, gauche


Répondre à ce message

Sujets en rapport avec ce message

ajouter image [ par dragon ] Je suis en train de faire un site admin en php, mais je dois faire une formulaire pour ajouter des itemsjusqu'ici tout vas très bien, sauf les item on popup image [ par swiss_cheese10 ] Salut le people ! Bon alors voici mon prob...Sur mon futur site, j'ai pas mal d'images et j'aimerais que quand l'utilisateur clique sur une image, un mélanger deux scripts [ par levalable ] Bjr à tous :)Je vais aller directement à mon problème... Je vous remerci déjà ;)voilà, je suis webmaster du site www.da-DreamTeaM.Tk. Et en ayant voul Menu dynamique a gauche avec images [ par YouTzeEN ] Salut à tous Bon, voila je suis un tres gros newbie ...Je cherche a faire un menu dynamique a gauche avec des images ...Voila en fait, j'aurai besoin 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 Superposer 2 images [ par Celi2312 ] Bonjour, J'aimerai un code java afin de superposer 2 images Sou dream, g une cellule afin image 1 et j'aimerai superposer une seconde image (en transp Simulation d'un clic sur un bouton image [ par andrebernard ] Boujour à tousVoila je suis arrivé a simuler un clic sur certains boutons traditionnels de pages, mais je n'arrive pas a le faire sur un bouton image. Vignettes qui defilent [ par riderlyon ] Bonjour,Alors voila en desespoir de cause apres de multiple recherches je me décide à poster sur ce forum.Je crée actuellement un site car je suis pho ma propre image avec un script derrière [ par rigauw ] Bonjour, voici mon soucis : j'ai un script de ce genre : <td style="font-family: Verdana, clic enfoncé [ par shadow578 ] Bonjour, Voilà j'aimerai réaliser un petit plus a mon site. J'aimerai, j'ai des boutons images lorsque j'appui dessus ils me redirige sur un lien, ma


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
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,198 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales