Gallerie immagini in css con tooltip

Da Dozy™ Dom 26 Ago 2012 - 17:03

Gallerie immagini in css con tooltip

Prima di tutto spieghiamo che cosè:

Con tooltip (letteralmente: consiglio su un oggetto) si intende un comune elemento dell'interfaccia grafica dell'utente. È utilizzato assieme ad un cursore, di solito il puntatore del mouse. L'utente passa col cursore sopra un oggetto, senza cliccarlo e appare un piccolo "box" con informazioni supplementari riguardo l'oggetto stesso.

Varianti
Una variante molto comune, specialmente nei programmi più datati, è mostrare la descrizione dell'oggetto in una barra di stato, ma questo tipo di descrizioni non sono chiamate di solito tooltip.
Un altro sistema che mirava a risolvere lo stesso problema, fu introdotto sui computer Macintosh dal System 7, con il nome di balloon help. In questo caso il testo di aiuto compariva in una nuvoletta simile a quella utilizzata nei dialoghi dei fumetti.
Un altro termine per tooltip, utilizzato da Microsoft per la documentazione per l'utente finale, è "ScreenTip" (letteralmente: consiglio a schermo).

es a testo:

Gallerie immagini in css con tooltip HTML_tooltip

Wikipedia - Tooltip

Prima

Gallerie immagini in css con tooltip 2dm5f710

Dopo

Gallerie immagini in css con tooltip Screen10

Versioni forum: tutte
Fonte: WEB
Dove metterlo: Preferibilmente in un widget, Annunci, Pagine html

Codice html che andrà inserito dove volete che appaia il tooltip, ovviamente cambiate i miei url con i vostri.

Codice:: <div class="gallery"> <div> <a href="Vostro Link "> <img src="http://www.playtec.it//media/k2/items/cache/75b44b0e9c2e5d305fa323c6c51d3476_S.jpg" alt="IMMAGINE" /> <span class="h2">Iscrizione GDR »</span> <strong class="h1">Halo Gdr >>Aperto</strong> <span>Siete tutti invitati al nostro gdr. <br>Iscrivetevi in tanti!</br></span> </a> </div> <div>

CSS > Pda>visualizzazione>immagini e colori>colori>foglio di stile css. Potete modificare colori, forme, ecc.

Codice:: body { background: #ffc } .gallery { width: 500px; font-family: sans-serif } .gallery div { position: relative; float: left; margin-right: 30px; margin-bottom: 20px; width: 160px; height: 140px; } .gallery a { position: absolute; top: 0; left: 0; padding-bottom: 16px; width: 160px; text-decoration: none; background: #fff; color: #444; z-index: 2; } .gallery a:hover { top: -20px; left: -20px; width: 200px; z-index: 10; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; } .gallery a img { display: block; margin-bottom: 1px; border: 0; background: #ccc; width: 100%; height: 80px; } .gallery a span { display: none; padding: 16px; padding-bottom: 0; font-size: 11px; } .gallery a:hover span { display: block } .gallery a span.h2 { padding-top: 4px; padding-bottom: 0; background: #09f; color: #fff; font-weight: bold; } .gallery a strong.h1 { display: block; border-top: 4px solid #09f; padding-top: 6px; } .gallery a:hover strong.h1 { padding-left: 20px; padding-right: 20px; color: #09f; }

Nb: Io ho fatto un tipo di Tooltip che riguarda un gioco ma voi potete farlo di qualsiasi argomento (pc,natura,sport,giochi, crezioni grafiche, musica ecc)

Per eventuali problemi rivolgersi in Problemi con lo script (Codici)