Come sistemare su più righe il tooltip di descrizione del link e della immagine con il tag title.
Nell'articolo precedente abbiamo visto come sia possibile inserire automaticamente i tag Title e Alt nel codice delle immagini postate nel blog e in questo post approfonderemo ulteriormente le potenzialità del tag Title che è quello che viene definito un attributo del link e che viene opzionalmente inserito nei collegamenti ipertestuali di testo, di immagini o di altri oggetti.
La particolarità del tag Title è che mostra in un tooltip il testo che vi viene digitato quando si passa sopra al link con il cursore. Questo avviene sia per i collegamenti testuali sia per le immagini.
Il codice HTML usato per un collegamento di testo con tag Title è il seguente
<a href="URL_LINK" title="Descrizione del link">Testo di ancoraggio</a>
La parte visibile è Testo di ancoraggio che quando ci si passa sopra con il mouse mostra il tooltip con la scritta Descrizione del link come mostrato nello screenshot successivo
![tag-title tag-title](http://lh6.ggpht.com/-9f7LQRdzH9M/UvtRdbd1zdI/AAAAAAAAl4Y/eIuMzR07y0g/tag-title%25255B3%25255D.jpg?imgmax=800)
L'utilità del tag Title è proprio quella di descrivere al lettore il significato della pagina linkata e viene visto di buon occhio anche dai motori di ricerca. Nel caso di immagini l'HTML è invece il seguente
<img src="URL_IMMAGINE" title="Descrizione della immagine"/>
che mostrerà il tooltip "Descrizione della immagine" quando si passerà sopra con il mouse
![descrizione-immagine descrizione-immagine](http://lh4.ggpht.com/-Okf_FyuJ0C4/UvtRfXfzDUI/AAAAAAAAl4g/olih5e2g5XI/descrizione-immagine%25255B3%25255D.jpg?imgmax=800)
Quando si ha la necessità di inserire una lunga descrizione per una immagine o per un link il tooltip prenderà in larghezza tutto lo spazio del layout sia nel caso dei link sia in quello delle immagini
![tooltip-tag-title tooltip-tag-title](http://lh3.ggpht.com/-qMyMh4vlV_w/UvtRhEMrj9I/AAAAAAAAl4o/nIqjHCIWXjU/tooltip-tag-title%25255B4%25255D.jpg?imgmax=800)
In questi casi si può scegliere di suddividere noi stessi il tooltip in due o più linee con questa struttura
title="Prima Riga Seconda Riga Terza Riga"
dove si possono inserire tutte le rughe che si vuole basta dividerle con la stringa . A titolo di esempio queste due HTML mostreranno i tooltip su più righe
<a href="http://www.google.it" title="Motore Di Ricerca">Google</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjaQzSn8RI3T-ul6iIYV-xZbBR3cKLdOTy7cw-IWM6KXkWmWXNToAgKSM5OHfIa5JBkCgMHYfN845c0bpKS2yU01liw2SNkNGucoQDLqcNYoMgcPW-gC-gxEhz0i-xD64hEkte76-mZFM/s590/chiesa.jpg" width="300" title="Piccola Chiesa Colorata Fotografata per il National Geographic in un piccolo villaggio del Continente Sudamericano"/>
nel modo seguente
![tooltip-title-tag tooltip-title-tag](http://lh3.ggpht.com/-n4ZB5Yoqw6M/UvtRi18khJI/AAAAAAAAl4w/p3hZ1sTzU6s/tooltip-title-tag%25255B3%25255D.jpg?imgmax=800)
Questo HTML è indipendente dalla piattaforma utilizzata e funzionerà in tutte le pagine web.
Buongiorno Ernesto..adesso mi sono accorta che dalla navbar non riesco ad entrare nel design e nel modello per scrivere....come mai?mi capita in tutti e due i miei blog
RispondiEliminaFermo restando che non è un problema. In questo blog la Navbar neppure c'è. Puoi entrare da qui
Eliminawww.blogger.com/home
forse hai inserito un widget tipo ribbon o magari i cuoricini di San Valentino che danno fastidio per cliccare
@#
grazie mille
EliminaGrandeeee!!! Non lo sapevo! :-P
RispondiElimina