Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Gallerie immagini in css con tooltip


Tutorial Gallerie immagini in css con tooltip

Messaggio Da Dozy™ il 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:



Wikipedia - Tooltip

Prima




Dopo




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™
Veterano dello staff

Sesso : Maschile
Età : 29
Messaggi : 2297
Località : Tradate (va)


Vedere il profilo dell'utente
Dozy™ è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum