-
|
| .
|
Frosty Artist
- Group
- Founder
- Posts
- 8,035
- Punti Cuore
- +1,151
- Location
- Il Regno dei Cuori
- Status
- Offline
|
|
Eccovi una semplice guida per inserire un'immagine che si ingrandisce e ne rivela un'altra al passaggio del mouse (:
Installazione
Inserite questo codice in Amministrazione > Grafica > Colori e Stili
CODICE /* THUMB */
.thumbnail {position: relative; z-index: 8; text-decoration: none !important}
.thumbnail:hover {background: transparent; z-index: 9}
.thumbnail > span {display: none; position: absolute; top: 0; left: 60px; padding: 5px}
.thumbnail > span img {padding: 2px}
.thumbnail:hover > span {display: block; border: 1px dashed gray; background-color: #FFF; color: black}
.thumbnail:hover span span {display: inline; border: none}
E questo codice in Amministrazione > Gestione Codice HTML > Dove preferite negli HTML
CODICE <a class="thumbnail" href="URL PROFILO"><img src="MINIATURA"><span><img src="IMMAGINE GRANDE">TESTO</span></a>
Personalizzazione
Ora, passiamo alla personalizzazione dello script HTML in base alle vostre preferenze.
CODICE <a class="thumbnail" href="URL PROFILO"><img src="MINIATURA"><span><img src="IMMAGINE GRANDE">TESTO</span></a>
URL PROFILO > Link al profilo collegato all'immagine
MINIATURA > URL immagine "piccola"
IMMAGINE GRANDE > URL immagine "grande"
TESTO > Inserite qui il testo che volete che appaia. Per far apparire la descrizione al di sotto dell'immagine, sostituite a position: absolute > position: left in questo punto del codice CSS:
CODICE .thumbnail > span {display: none; position: absolute; top: 0; left: 60px; padding: 5px}
Se avete domande postate qui! (:
|
|
|
| .
|
0 replies since 16/7/2013, 21:56 366 views
.