Visualizza il testo su MouseOver per l'immagine in HTML


130

Vorrei visualizzare il testo quando l'utente passa il mouse sull'immagine.

Come posso farlo in HTML / JS?

Risposte:


241

Puoi usare l' titleattributo.

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

Puoi cambiare la fonte dell'immagine come preferisci.

E come ha commentato @Gray :

È inoltre possibile utilizzare il titlesu altre cose come <a ...ancore, <p>, <div>, <input>, ecc See: questo


3
È inoltre possibile utilizzare il titlesu altre cose come <a ...ancore, <p>, <div>, <input>, ecc .. See: w3schools.com/tags/att_global_title.asp
Grey

16

Puoi utilizzare CSS hover
Link per jsfiddle qui: 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

Puoi fare così anche:

HTML:

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

In javascript:

function somefunction()
{
  //Do somethisg.
}


3

Puoi utilizzare il passaggio del mouse CSS in combinazione con uno sfondo di immagine.

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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.