Hiển thị văn bản trên MouseOver cho hình ảnh trong html

130

Tôi muốn hiển thị văn bản khi người dùng di chuột hình ảnh.

Làm thế nào tôi có thể làm điều này trong HTML / JS?

html image

— jseth
nguồn

240

Bạn có thể sử dụng titlethuộc tính.

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

Bạn có thể thay đổi nguồn hình ảnh như bạn muốn.

Và như @Gray đã nhận xét:

Bạn cũng có thể sử dụng titlevào những thứ khác như <a ...neo, <p>, <div>, <input>vv Xem: này

— Farhad Jabiyev
nguồn

3

Bạn cũng có thể sử dụng titlevào những thứ khác như <a ...neo, <p>, <div>, <input>, vv .. Xem: w3schools.com/tags/att_global_title.asp

— Grey

16

Bạn có thể sử dụng CSS hover
Liên kết đến jsfiddle tại đây: 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;
}

— Eric Leschinski
nguồn

4

Bạn cũng có thể làm như thế này:

HTML:

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

Trong javascript:

function somefunction()
{
  //Do somethisg.
}

Hay nói, là một tài tài của, qua, qua, qua một tài khác, qua giữ, qua một tài khác

— người sử dụng
nguồn

3

Bạn có thể sử dụng CSS hover kết hợp với nền hình ảnh.

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>

— chiếu
nguồn