Tekst weergeven op mouseover voor afbeelding in HTML

Ik wil graag tekst weergeven wanneer de gebruiker het beeld mement.

Hoe kan ik dit doen in HTML / JS?

Antwoord 1, Autoriteit 100%

U kunt titlekenmerk gebruiken.

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

U kunt de bron van beeld wijzigen zoals u wilt.

en als @Gray becommentarieerd:

U kunt ook de titlegebruiken op andere dingen zoals <a ...ankers, <p>, <div>, <input>, etc.
Zie: dit

Antwoord 2, Autoriteit 6%

U kunt CSS-zweven gebruiken

Link naar JSFiddle Here: 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;
}​

Antwoord 3, Autoriteit 2%

U kunt dit ook doen:

HTML:

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

In JavaScript:

function somefunction()
{
  //Do somethisg.
}

Antwoord 4

U kunt CSS-zweven gebruiken in combinatie met een beeldachtergrond.

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>