PHP

Afficher une image différente à chaque clic

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Afficher une image différente à chaque clic

berilia

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

Publicité

NewsletTux

<Insérez ici votre vie />

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

berilia

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

berilia

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

jocastt

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

berilia

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

FORUM HardWare.fr

Programmation

PHP

Afficher une image différente à chaque clic

Sujets relatifs
image et .jrxml	Pas de traitement d'image avec image_filter();
[VBA] : problème d'affichage (Image.Visible = False ou true)	[JAVA] Définir une image de fond pour un JPanel
Décomposer une image en plusieurs matrices de 8*8	Afficher le resultat d'une requête SQL (VBA access)
Afficher le nom des éléments d'un tableau	écrire sur une image
Durée de vie session PHP et image	afficher un suraffichage transparent
Plus de sujets relatifs à : Afficher une image différente à chaque clic

Page générée en 0.075 secondes