web-dev-qa-db-fra.com

Afficher le texte sur MouseOver pour une image au format HTML

Je voudrais afficher du texte lorsque l'utilisateur survole l'image avec la souris.

Comment puis-je faire cela en HTML/JS?

htmlimage
116
jseth

Vous pouvez utiliser l'attribut title.

<img src="smiley.gif"  title="Smiley face"/>

Vous pouvez changer la source de l'image comme vous le souhaitez.

Et comme @ Gray a commenté:

Vous pouvez également utiliser le title sur d'autres éléments tels que <a ... ancres, <p>, <div>, <input>, etc. Voir: this

208
Farhad Jabiyev

Vous pouvez utiliser le survol CSS
Lien vers jsfiddle ici: http://jsfiddle.net/ANKwQ/5/

HTML:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ'></a>
<div>text</div>
​

CSS:

div {
    display: none;
    border:1px solid #000;
    height:30px;
    width:290px;
    margin-left:10px;
}

a:hover + div {
    display: block;
}​
15
user1317647

Vous pouvez faire comme ça aussi:

HTML:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a>

En javascript:

function somefunction()
{
  //Do somethisg.
}

Un séjour sans faille

4
user

Vous pouvez utiliser le survol CSS en combinaison avec un arrière-plan d'image.

CSS

   .image
{
    background:url(images/back.png);
    height:100px;
    width:100px;
    display: block;
    float:left;
}

.image  a {
    display: none;
}

.image  a:hover {
    display: block;
}

HTML

<div class="image"><a href="#">Text you want on mouseover</a></div>
3
mat