Discussion :

[BRUNO71]

Bonjour,

Je possède une image avec du JS, de telle sorte qu'au passage de la souris le texte s'affiche d'un une balise P (texte).

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<img class="img1" src="1.jpg" alt="Mon texte"  onMouseOver="document.all.texte.innerText='Mon texte'" onmouseout="document.all.texte.innerText=''">
<p id="texte"></p>

Ca fonctionne bien, cependant j'ai 15 images, est-il possible d'afficher le message situé dans alt="Mon message" dans cette fameuse balise P uniquement avec jquery.
En fait j'aimerais avoir un code unique pour les 15 images...pour me simplifier la vie..


Merci de votre aide...

Bruno

[mathieu]

vous pouvez aussi stocker le texte dans un attribut "data" comme cela :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<img class="img1" src="1.jpg" alt="image 1 - Mon texte" data-texte-b="image 1 - texte B"/>
<img class="img2" src="2.jpg" alt="image 2 - Mon texte" data-texte-b="image 2 - texte B"/>

et ensuite vous pouvez lire ces textes avec jQuery comme cela :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
    $("img").mouseover(function (e) {
 
        var texteAlt = $(this).attr("alt");
        var texteB = $(this).data("texteB");
 
        console.log(texteAlt);
        console.log(texteB);
 
    });

[SpaceFrog]

https://jsfiddle.net/uctzh1os/8/

[BRUNO71]

Bonsoir,

Merci à vous, excellent j'ai fait un mixte des deux pour obtenir celà (si ça peut servir à quelqu'un):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
              <img src="1.jpg" alt="essai">
 
                            <p class="Result-img"></p>
 
                    <script>
                        $("img").mouseover(function (e) {
                            var texteAlt = $(this).attr("alt");
                             $('.Result-img').text(texteAlt);                                                                           
                        });
                        $("img").mouseout(function (e) {
                            var texteAlt = $(this).attr("alt");
                            $('.Result-img').text("");
                        });
                    </script>

Sans oublier bien sur de charger le fichier Jquery...

Merci à vous deux...