Display Text on Mouseover for Image in Html

Name: Display Text on Mouseover for Image in Html
Uploaded: 2026-10-01T06:50:09+00:00
Duration: 10 min 47 s
Description: 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. You Can Change the Source...

Question

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

How can I do this in HTML/JS?

Accepted Answer

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

Answer 2

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>

Answer 3

You can do like this also:

HTML:

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

In javascript:

function somefunction()
{
  //Do somethisg.
}

Answer 4

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 class="image"><a href="#">Text you want on mouseover</a></div>

Display Text on Mouseover for Image in Html

Must Read

4 Answers

Maya Lin-Takahashi