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.
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.
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
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 ?
_ 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";
}
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 ?
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 ?
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.
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....
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 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 ^^
