Display text on MouseOver for image in html

I would like to display text when the user mouseovers the image.

How can I do this in HTML/JS?

4 Answers

You can use title attribute.

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

You can change the source of image as you want.

And as @Gray commented:

You can also use the title on other things like <a ... anchors, <p>, <div>, <input>, etc. See: this

1

You can use CSS hover:

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

<a><img src='
<div>text</div>

0

You can do like this also:

HTML:

<a><img src=' onmouseover="somefunction();"></a>

In javascript:

function somefunction()
{ //Do somethisg.
}

​

You can use CSS hover in combination with an image background.

.image { background: url(); height: 100px; width: 100px; display: block; float: left;
}
.image a { display: none;
}
.image a:hover { display: block;
}

<div><a href="#">Text you want on mouseover</a></div>

0