Squall.Leonhart |
|
| Questo codice va inserito in Gestione Codice HTML > In Cima al Forum
Potete vederne un esempio andando nella hompage del nostro forum, vedrete che nella tabella principale, nel riquadro "il nostro Staff", passando sopra alle icone, appariranno le carte d'identità dello staff.
CODICE <style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
Fermo restando questo codice in cima il forum, adesso potrete sfruttare questa nuova funzionalità all'interno del vostro forum.
Questo è il codice che bisogna quindi utilizzare nel punto in cui volete che venga visualizzata l'immagine:
CODICE <a class="thumbnail" href="LINK_PAGINA" target="_blank"><img src="LINK IMMAG CHE APPARE PICCOLA" width="10px" height="11px" border="0"><span><img src="LINK DELLIMMAG CHE APPARE QUANDO SI PASSA IL MAUSE"><br>TESTO CHE APPARIRà INSIEME ALL IMMAG INGRANDITA</span></a>
Basta sostituire le parole scritte in maiuscolo con il rispettivo valore che richiedono: il link della pagina a cui questa immagine deve portare, il link dell'immagine piccola che appare sempre, il link dell'immagine grande che appare solo quando ci si passa il mouse sopra, ed infine il testo che volete appaia insieme all'immagine grande.
Se al posto dell'immagine piccola volete una scritta, cioè passando sopra la scritta deve apparire l'immagine grande, il codice è questo:
CODICE <a class="thumbnail" href="LINK_PAGINA" target="_blank">SCRITTA<span><img src="LINK DELLIMMAG CHE APPARE QUANDO SI PASSA IL MAUSE"><br>TESTO CHE APPARIRà INSIEME ALL IMMAG INGRANDITA</span></a>
|
| | |
