CODEWITHSUNDEEP
htmlimage
jseth
jseth

Reputation: 1873

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?

Upvotes: 165

Views: 608811

Answers (4)

mat
mat

Reputation: 1629

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

.image {
  background: url(https://placekitten.com/100/100);
  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>

Upvotes: 4

user1317647
user1317647

Reputation:

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='https://placekitten.com/100/100'></a>
<div>text</div>

Upvotes: 18

Farhad Jabiyev
Farhad Jabiyev

Reputation: 26635

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

Upvotes: 320

user
user

Reputation: 348

You can do like this also:

HTML:

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

In javascript:

function somefunction()
{
  //Do somethisg.
}

​

Upvotes: 6

Related Questions