Відображення тексту на MouseOver для зображення в html

130

Я хотів би відображати текст, коли користувач наводить мишу на зображення.

Як я можу це зробити в HTML / JS?

html image

— jseth
джерело

241

Ви можете використовувати titleатрибут.

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

Ви можете змінити джерело зображення, як хочете.

І як прокоментував @Gray :

Ви можете також використовувати titleна інші речі , як <a ...якоря, <p>, <div>, <input>і т.д. Див: це

— Фархад Джабієв
джерело

3

Ви можете також використовувати titleна інших речах , як <a ...якоря, <p>, <div>, <input>і т.д .. Див: w3schools.com/tags/att_global_title.asp

— сірий

16

Тут ви можете використовувати
посилання CSS за допомогою посилання на jsfiddle: 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;
}

— Ерік Лещинський
джерело

4

Ви можете зробити так, як це:

HTML:

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

У JavaScript:

function somefunction()
{
  //Do somethisg.
}

Сігналы абмеркавання

— користувач
джерело

3

Ви можете використовувати наведення курсора CSS у поєднанні з фоном зображення.

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>

— килимок
джерело