Rationaliser mouseEnter et mouseOut pour 15 images

Version imprimable

21/02/2018, 20h48
BRUNO71

Rationaliser mouseEnter et mouseOut pour 15 images
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:

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

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

Code:

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:

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);
 
    });

22/02/2018, 08h43
SpaceFrog

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

Bonsoir,

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

Code:

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