Come fare a..‎ > ‎Grafica e disegno‎ > ‎

Testo o immagine che appare al passaggio del mouse (tooltip)

di Maria Silvana Radice







Come far apparire un testo o un'immagine al passaggio del mouse

How to display a text or an image
onmouseover (tooltip)



Come far apparire un testo su un altro testo:

Codice:

 <div title="testo nascosto"> testo che appare <div>

Esempio: (passate il mouse su una qualsiasi delle parole....ci vuole un secondo e il testo nascosto apparirà)

Per cambiare il colore del testo visibile, si aggiunge questo tag:  <FONT color="#FF0000"> prima del testo, inserendo il codice del colore scelto (nell'esempio è il rosso #FF0000), oppure il nome del colore in inglese, così:

<div title="testo nascosto">
<FONT color="#FF0000">testo che appare</div>

(Editor colori)

Per cambiare la dimensione del testo visibile, si aggiunge questo tag: <FONT size=2>............</FONT>. Cambiate il numero per cambiare la dimensione e il testo va al posto dei puntini, così:

<div title="testo nascosto">
<FONT size=6>testo che appare</FONT></div>

Se volete che il testo sia visualizzato su un link....

....il codice è questo:

<a href="#" title="testo nascosto">testo che appare</a>

Esempio:
testo che appare

Le parti in rosso, nei codici, sono quelle che potete variare, scrivendo il testo che preferite
.

(guarda, più sotto, come andare a capo con il testo del tooltip)

Come far apparire un'immagine su un link:

Esempio:
Per ottenere questo tooltip, dovete scaricare un file zip, cliccando su....


....oppure usando il link per il download in fondo a questa pagina.

Scompattate il file ed estraete la cartella. Nella cartella troverete tre file: due file.js e un file.html.
Aprite il file html con un editor di testo.
Il codice che apparira` e` questo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</meta>

<style>
body
{
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
    background:#fff;
}
#screenshot{
    position:absolute;
    border:1px solid #397CF0;
    background:#397CF0;
    padding:2px;
    display:none;
    color:#fff;
    }

</style>
</head>
<body>

    <p>Testo prima del link <a href="URLcollegamento" class="screenshot" rel="URLimmagine" title="Titolo immagine">Testo del link</a> Testo dopo il link</p>

</body>
</html>
Fonte

I parametri importanti da modificare sono quelli in rosso, in questo modo:
  • font:80% Arial, Helvetica, sans-serif = sono i parametri del testo, grandezza in percentuale e font
  • color:#555 = colore del testo
  • background:#fff = colore di fondo del testo
  • border:1px solid #397CF0 = spessore, stile e colore del bordo intorno al tooltip
  • background:#397CF0 = colore di fondo del tooltip
Infine, piu` sotto, dovete inserire il testo, prima e dopo il link (indicato in verde), il collegamento, l'indirizzo dell'immagine, il titolo che appare nel tooltip, e il testo del link.

Per inserire questo tooltip in Google sites, dovete seguire la guida Come inserire codici e scripts in Google sites.

Come far apparire il testo su un'immagine:

Esempio:


Semplicemente, con questo codice:

<img src="URL immagine" title="testo">

Al posto di "URL immagine", mettete l'indirizzo web dell'immagine che volete caricare e al posto di "testo", scrivete il testo che apparirà al passaggio del mouse.

Come andare a capo con il testo di un tooltip:

Adesso, però, la domanda è....e se volessi andare a capo con il testo? Per esempio per creare un elenco di nomi? Sembra una sciocchezza, eppure ho dovuto cercare e pensare parecchio per trovare la soluzione. Ecco, quindi i codici da usare per creare un tooltip che permetta di andare a capo con il testo....

Esempio su testo:

Codice:
<div title="Testo&#13Testo">Prova a passare qui con il mouse</div>

Codice per immagine:
<img src="URL immagine"  title="Testo&#13Testo">

Avete capito qual'è il trucco vero? Sta tutto in quel piccolo tag "&#13", che va inserito nel punto in cui volete che il testo si interrompa per continuare una riga più in basso. Basta saperlo....:-))

In Google sites, può essere inserito direttamente nell'html della pagina. Oppure seguendo la guida Come inserire codici e scripts in Google sites




Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in   

Ti e` stato utile questo argomento?













ċ
Tooltip immagine.zip
(16k)
Maria Silvana Radice,
18 mar 2015, 16:44