Gallerie immagini in css con tooltip

Tutorial Gallerie immagini in css con tooltip

Messaggio 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)



Tutorial creato da:
Copyrigth © FORUMATTIVO.COM


Dozy™
Dozy™
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 36
Messaggi : 2297
Località : Tradate (va)

Dozy™ è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.