Se connecter / S'enregistrer
Votre question

Apparition d'un texte en fonction d'une image

Tags :
  • element
  • Programmation
Dernière réponse : dans Programmation
24 Avril 2010 01:30:48

Bonsoir à tous.

Je cherche le moyen grâce au Javascript en cliquant sur une image qu'un texte apparaisse dans une zone précise encadré par des div.

Cette image doit avoir un texte précis, sachant que j'ai une trentaine d'images il y a donc une trentaine de textes différents.

Je me base sur un onclick pour essayer de faire cela mais je cherche depuis une journée entière, soit je cherche mal soit je ne vois pas les solutions.

Si mes explications ne semblent pas assez précises n'hésitez pas à demander des précisions.

Merci à vous.

Autres pages sur : apparition texte fonction image

a c 232 L Programmation
24 Avril 2010 10:19:15

Salut,

Tu peux mettre le texte que tu veux afficher dans l'attribut "title" de ton image par exemple. Ensuite, sur le onclick, tu passes la variable this à ta fonction.
Exemple: onclick="doSomething(this);"
Du coup, dans ta fonction doSomething(element), tu auras accès directement à ton image, et tu pourras faire :
  1. function doSomething(element) {
  2. alert(element.title);
  3. }
m
0
l
24 Avril 2010 11:03:41

J'ai saisis ce que tu expliques pour le title mais mon texte peut être imposant et aller jusqu'à deux ou trois lignes donc...

Ensuite ce que je veux faire ressemble à ceci :

<div class="zone_text">
<img id="img" src="" alt="" />
(je veux insérer le texte ici)

</div>


<img src="truc1.gif" onclick="document.getElementById

('img').src='truc1.gif';" alt="Truc1" title="Truc1"/>
<img src="truc2.gif" onclick="document.getElementById

('img').src='htruc2.gif'" alt="Truc2" title="Truc2"/>

Je ne met que deux exemples d'images pour montrer le code.
m
0
l
Contenus similaires
a c 232 L Programmation
24 Avril 2010 13:47:27

Une autre solution pourrait être d'avoir un span ou autre container qui ait le texte voulu, et ce container aurait un id.
Exemple:
  1. <span>
  2. <img src="truc1.gif" onclick="showImage(this);" />
  3. <span style="display:none;">Texte pour le truc1</span>
  4. </span>


Et ton container:
  1. <div class="zone_text">
  2. <img id="img" src="" alt="" />
  3. <span id="futur_texte">le futur texte</span>
  4.  
  5. </div>


Et le code javascript:
  1. function showImage(element) {
  2. document.getElementById('img').src = element.src;
  3. document.getElementById('futur_texte').innerText = element.parentNode.innerText;
  4. }
m
0
l
24 Avril 2010 14:23:57

Je ne comprend pas à quoi sert cette ligne dans ton code :
<span style="display:none;">Texte pour le truc1</span>
Elle est censé écrire un texte mais elle n'écrit rien.

Pour le container je ne comprend pas non plus...
<span id="futur_texte">le futur texte</span>
Le texte aussi ici est stoïque...

Pour la ligne de code javascript :
document.getElementById('futur_texte').innerText = element.parentNode.innerText;
Je suppose qu'elle sert à écrire la seconde ligne qui est stoïque.

Je ne suis pas très doué en Javascript, je pense que ça se voit...
m
0
l
a c 232 L Programmation
24 Avril 2010 18:35:21

:) 
En fait, la première ligne permet de mettre du texte, sans l'afficher.
Pour le container, "le futur texte" devrait être remplacé.

Et la ligne de javascript devrait (:D ) remplacer "le futur texte" par "Texte pour le truc1"
m
0
l
24 Avril 2010 19:14:02

J'ai beau faire des tests tout ce qui concerne le texte reste stoïque et est chargé dès le début de la page, aucune action ne met le texte donc...
m
0
l
a c 232 L Programmation
24 Avril 2010 19:24:40

En effet, ça ne marche pas sous Firefox, mais ça marche sous IE. Sous firefox il faudrait utiliser innerContent au lieu de innerText.

Euh, doit bien y avoir une solution de faire ça plus proprement... :/ 
m
0
l
24 Avril 2010 19:28:19

Ca ne change rien avec innerContent, tous les textes sont déjà chargé au lancement de la page ^^'
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS