Sujet Précédent Sujet Suivant

JavaScript changer une image par un click

Fermé
youkisall Messages postés 20 Date d'inscription lundi 12 novembre 2007 Statut Membre Dernière intervention 5 juin 2011 - 12 nov. 2007 à 15:33
 Zeos - 22 juil. 2009 à 09:28
Bonjour,
Je veux de l'aide pour pouvoir avec JavaScript changer une image par une autre dans une cellule, mais le bouton sur le quel on clique n'est pas ds la meme cellule que celle ou l'image sera affichee
Exemple j ai 2 cellules ds la premiere j'ai deux chois possible permettant de choisir un plat dans un restaurant.
En cliquant sur un bouton parexemple , dans la cellule en bas l'image d'un cafe apparait.
En cliquant sur The sur la premiere cellule (au lieu d ecafe), l'image du cafe qui etait ds la deuxieme cellule sera remplace par une image differente representant un thé.
Si aucun n'est cliqué la cellule ou les images apparaissaient reste blanc (vide).
MErci
A voir également:

2 réponses

Réponse 1 / 2
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
12 nov. 2007 à 17:29
salut,

Je veux de l'aide
ça commence très mal.

pour l'image, dans la cellule tu ne mets rien mais tu lui donne un identifiant 'id="toto"'.

pour afficher tu utilises par exemple des liens '<a>' et tu gères l'évènement 'onclick'. 
<a onclick="document.getElementById('toto').innerHTML='<img src="image_cafe.png" width="80" height="120" />';">Caf&eacute;</a>
9
Réponse 2 / 2
Zeos
22 juil. 2009 à 09:28
Tu peut aussi bien le faire avec un iframe (Balise HTML) sauf que ce n'est pas très pratique d'un point de vue esthétique mais cela fonctionne très bien.
par exemple :

Première Cellule : 
<a href="image1.jpg" target="image_link">Image 1</a>
<a href="image2.jpg" target="image_link">Image 2</a>
<a href="image3.jpg" target="image_link">Image 3</a>


Deuxième Cellule :
(l'url de l'image est envoyer grâce a target="image_link" dans name="image_link" de l'iframe) 
<iframe src="image_par_defaut.jpg" name="image_link" width="590" height="470" allowtransparency="true" frameborder="0" hspace="0" vspace="0" >Votre image s'affichera dans ce cadre</iframe>


Voila . et bon code :) .
PS : Désoler pour les faute d'orthographe potentielle.
3