Afficher une image différente à chaque clic

Marsh Posté le 15-05-2009 à 12:25:14

Bonjour,

J'ai un petit problème que je n'arrive pas à gérer, je préviens, je m'estime débutante.
(je ne suis pas sûre d'être dans la bonne sous-catégorie)

J'ai créé un menu "en accordéon" (liste + fonction javascript showhide(id)) et je voudrais que les utilisateurs cliquent sur une image pour voir/masquer les sous-menus, et que cette image change à chaque fois (une image "+" pour dérouler, une image "-" pour masquer).

J'ai tout d'abord essayer avec une fonction javascript, mais si j'ai bien compris, ça ne marchera jamais puisque j'appelle du php... je crois...
Quoi qu'il en soit, je n'arrive pas à appeller la fonction javascript affimage.

Voici mon script showhide :

Code :

<script type="text/javascript">
function showhide(id) {
var elmt = document.getElementById(id);
if (elmt) {
if(elmt.style.display=='block'){
elmt.style.display='none';
}
else{
elmt.style.display='block';
}
}
}
</script>

Mon script affimage :

Code :

<script type="text/javascript"><!--
function affimage(id) {
var elmt = document.getElementById(id);
var chaine ='';
if elmt.style.display='block' {
chaine = '<img src="imagesdeco/bouton-suivant.gif">';
} else {
chaine = '<img src="imagesdeco/boutsuit.gif">';
}
return chaine;
}
--></script>

Et la ligne ou j'appelle tout ça :

Code :

<li><span><?php echo $catlien; ?><span onClick="javascript:showhide('<?php echo $i; ?>');">
javascript:affimage($i)
</span></span>

J'aurai voulu faire ce genre de chose, mais quelle condition dois-je utiliser??

Code :

<li><span><?php echo $catlien; ?><span onClick="javascript:showhide('<?php echo $i; ?>');">
<?php if ... afficher image1 else afficher image2 ?>
</span></span>

J'ai beaucoup détaillé car je ne sais pas si c'est une bonne solution, si non, donnez moi d'autres pistes svp!

Message édité par berilia le 15-05-2009 à 12:28:18

Reply

Marsh Posté le 15-05-2009 à 12:25:14

Reply

Marsh Posté le 15-05-2009 à 20:19:45

si tu fais ça en PHP, ça sera généré puis ça sera statique (ou alors faudra un rechargement de page à chaque fois, puisque le php est côté serveur. Auquel cas ton javascript ne servira à rien.

si tu le fais en JS, tu affiches "normalement" une première image à laquelle tu attribues un id="mon_image" et sur tes boutons, tu appelles ta fonction javascript en passant 'mon_image" en paramètre.

---------------
NewsletTux - outil de mailing list en PHP MySQL

Reply

Marsh Posté le 18-05-2009 à 09:20:12

En clair, il ne faut pas que je le fasse en PHP.

Pour le javascript, le problème, c'est que mon bouton sera l'image...
Je fais ça :
<img src="imagesdeco/boutonplus.gif" id="imagesdeco/boutonplus.gif">
?

Mais comment j'appelle la fonction javascript?

Je suis un peu paumée, là...

Reply

Marsh Posté le 27-05-2009 à 12:50:25

Bonjour,
C'est encore moi, j'y arrive presque...

mon script :

Code :

<script type="text/javascript">
function change(id){
var elmt = document.getElementById(id);
if (elmt.src == "imagesdeco/bouton_plus.gif";)
elmt.src = "imagesdeco/bouton_moins.gif";
else
elmt.src = "imagesdeco/bouton_plus.gif";
}
</script>

l'appel du script :

Code :

<img onClick="javascript:change('<?php echo $imagei; ?>');" src="imagesdeco/bouton_plus.gif">

Il ne se passe rien, et je ne comprends pas pourquoi...
Quelqu'un peut m'aider?

Message cité 1 fois

Reply

Marsh Posté le 28-05-2009 à 14:52:17

berilia a écrit :

Code :

<img onClick="javascript:change('<?php echo $imagei; ?>');" src="imagesdeco/bouton_plus.gif">

Du coup ton image n'a plus d'id ? :pt1cable:

Je vois pas bien l'interet de mettre un id de cette forme la, mais pour respecter ton boulot à fond, teste ca :

Code :

<img id="<?php echo $imagei; ?>" onClick="javascript:change('<?php echo $imagei; ?>');" src="imagesdeco/bouton_plus.gif">

Pour développer le javascript, j'aime bien utiliser firebug sous firefox. C'est un module de débug assez sympa.
Ca peut sortir de quelques galères.

Courage. :hello:

PS : fait gaffe je crois que faire des comparaisons de valeur de .src n'est pas très fiable.
Rajoute un autre attribut à ton image ca sera plus stable.
Chez moi :

Code :

<script type="text/javascript">
function change(id){
var elmt = document.getElementById(id);
if (elmt.title == "activer" ){
elmt.title = "desactiver";
elmt.src = "img/fleche_gris.gif";
}else{
elmt.title = "activer";
elmt.src = "img/fleche_bleu.gif";
}
}
</script>

+

Code :

<img title="activer" src="img/fleche_gris.gif" id="1" onclick="javascript:change('1')" />

alterne bien les 2 images.

Message édité par jocastt le 28-05-2009 à 15:12:18

Reply

Marsh Posté le 29-05-2009 à 13:42:16

Bonjour,

ça pose un problème qu'une image n'ai pas d'id?
EDIT : bien sur que ça pose un problème!! Quelle question idiote!!

Comme je suis dans une boucle, je ne peux pas choisir un nom d'id fixe. Du coup, je rajoute un caractère à chaque tour de boucle à $imagei... C'est pas super propre, mais ça a le mérite de fonctionner...

J'ai réussi à régler le problème toute seule hier (je n'avais pas vu ton message) :
EDIT (encore^^) : Je crois qu'en fait le problème n'était pas réglé!

Code :

<script type="text/javascript">
function change(id){
var elmt = document.getElementById(id);
if (elmt.src == "imagesdeco/bouton_plus.gif";)
elmt.src = "imagesdeco/bouton_moins.gif";
else
elmt.src = "imagesdeco/bouton_plus.gif";
}
</script>
<img onClick="javascript:change('<?php echo $imagei; ?>');" src="imagesdeco/bouton_plus.gif">

Merci pour firebug et pour le conseil de test sur title et pas sur src, je ne savais pas.

Message édité par berilia le 29-05-2009 à 13:56:28

Reply

Afficher une image différente à chaque clic

Sujets relatifs:

Leave a Replay