1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Alterner deux images [Résolu]

Signaler
Messages postés
6
Date d'inscription
mercredi 19 août 2009
Statut
Membre
Dernière intervention
21 novembre 2009
 -
Messages postés
6
Date d'inscription
mercredi 19 août 2009
Statut
Membre
Dernière intervention
21 novembre 2009
 -
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=""

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
Afficher la suite

13 réponses

Réponse 1 / 13
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
 4
En fait ton alignement ne sert pas à grand chose, une div aurait largement suffit, il éxiste la propriété text-indent en CSS, et en ne modifiant pas l'image mais la propriété backgroundImage de la div, tu obtiendrais je le pense ce que tu cherches...

Pourquoi faire compliquer quand on peut faire encore plus compliquer ?
ça donnerait un truc du genre: 

<html>
<head>
<script>
function changePict(_obj){
// récupération de toutes les images de la div
var _imgs = document.getElementById("divContent").getElementsByTagName("div");
// 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].style.backgroundImage != "url('silver.png')"){
_imgs[i].style.backgroundImage = "url('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].style.backgroundImage = "url('green.png')"
}
}
}
</script>
<style>
.DivMenu{
overflow:hidden;
width:100px;
height:25px;
text-decoration:none;
background-position:top left;
background-repeat:no-repeat;
background-image:url("silver.png");
text-indent:15px;
cursor:pointer;
}
</style>
</head>




Premier menu


Deuxième menu


Troisième menu


[o-_-o]
Réponse 2 / 13
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
 4
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: 

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


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]
Réponse 3 / 13
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 8
et ben ????
j'ai mis un exemple avec un click sur
une image ou sur un lien !!!!
remplacez par le click sur un div
mais si c'est pour mettre une image dans un
div avec innerHTML, autant utiliser directement
le src de la balise !
tant à vos histoires de positionnements, ce que
vous mettez pour un div, vous pouvez l'appliquer
à un img.
Réponse 4 / 13
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 8
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 : 
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
Réponse 5 / 13
Messages postés
6
Date d'inscription
mercredi 19 août 2009
Statut
Membre
Dernière intervention
21 novembre 2009
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 ?
Réponse 6 / 13
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 8
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 ?
Réponse 7 / 13
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 8
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
Réponse 8 / 13
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 8 
exemple avec 3 images....

[javascript:met(document.getElementById('img1')); 1]
[javascript:met(document.getElementById('img2')); 2]
[javascript:met(document.getElementById('img3')); 3]




<script>
var prec=document.getElementById("img1");
function met(quoi)
{	prec.src="btn green.gif";
prec=quoi;
prec.src="btn red.gif";			
}
</script>

bien entendu, à adapter à ce que vous faites...
Réponse 9 / 13
Messages postés
6
Date d'inscription
mercredi 19 août 2009
Statut
Membre
Dernière intervention
21 novembre 2009
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.
Réponse 10 / 13
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 8
j'ai cru voir "cliquer sur l'élément",
ça ne change pas grand chose : 



<script>
var prec=document.getElementById("img1");
function met(quoi)
{	prec.src="btn green.gif";
prec=quoi;
prec.src="btn red.gif";
}
</script>
Réponse 11 / 13
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
 8
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....
Réponse 12 / 13
Messages postés
6
Date d'inscription
mercredi 19 août 2009
Statut
Membre
Dernière intervention
21 novembre 2009
Hello, et merci de vos interventions,

mais je pense que le problème qui me bloque le plus, c'est qu'en fait le "bouton" est une div dans laquelle se trouve deux div alignée horizontalement, l'une conteannt l'image gris originale (grise pour tous au départ) et la suivante le texte.

Je voudrai que le code se déclanche au clic sur la div contenant les boutons, je pense que cela pose un problème pour récupérer les id, enfin je pense, je regarderai cela plus avant ce soir.

Merci a vous.
Réponse 13 / 13
Messages postés
6
Date d'inscription
mercredi 19 août 2009
Statut
Membre
Dernière intervention
21 novembre 2009
Merci a vous deux, j'ai un peu remixé de vous deux, et je m'en sort, je vais essayer de peaufiner, et je viendrai poser ma solution histoire de faire avancer le débat ^^

Merci encore
Répondre Posez votre question