-
.
La guida che segue è stata scritta da me in esclusiva per GraphicsMania, mentre i codici sono stati prelevati da questo sito >>QUI<<. SPOILER (click to view)
Con questa guida impareremo a creare una tabella staff con gli avatar che si "proiettano" al passaggio del mouse. Per prima cosa dovrete creare due avatar: uno più piccino, che chiameremo "IMMAGINE FISSA", e uno più grande, che chiameremo "IMMAGINE PROIETTATA".
Esistono due modi per ottenere l'effetto mostrato nell'immagine.
Il primo metodo è quello di inserire in Modifica Colori e Stili il seguente codice:CODICE/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.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 */
}
Il secondo metodo è quello di inserire in Gestione Codici HTLM > Codice HTML che verrà visualizzato in ogni pagina in cima al sito il seguente codice:CODICE<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.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>
Per comodità vi consiglio il secondo codice ^___^
Ed ora alcuni consigli per modificare i parametri che trovate:
Il primo background-color ossia questo:
background-color: transparent;
Indica il colore di sfondo del testo, quindi se volete modificarlo basta cambiare il valore transparent nel colore che desiderate (è possibile usare anche un colore esadecimale).
Il secondo background-color, ossia questo:
background-color: lightyellow;
Indica il colore di sfondo dell'immagine proiettata, quindi se volete modificarlo basta cambiare il valore lightyellow con il colore che desiderate (es: green; red; oppure potete inserire il valore esadecimale di un colore tipo #FFAAAA)
Padding indica la grandezza della cornice, quindi, se volete modificarla basta cambiare il valore 5 pixel con il valore che preferite.
Left indica la posizione in cui si dovrà proiettare l'immagine, quindi se volete che venga proiettata a sinistra, dovete mettere il segno - vicino al valore in pixel, mentre se la volete proiettata a destra basta togliere il segno -.
Border indica la grandezza di piccoli quadratini presenti sulla cornice. Il valore, essendo impostato a 1, non ne permette la visione, quindi per ingrandire i quadretti basta modifcare il valore 1px con il valore che vi sembra piu' adeguato.
Color indica il colore dei quadretti sopra citati, quindi per cambiare colore basta modificare la scritta "black" con il colore che preferite. Anche in questo caso potete usare i colori esadecimali.
Text-decoration determina le decorazioni che si possono dare al testo, in questo esempio non c'è nessuna decorazione, ma nel caso si voglia modificare il codice basta cambiare il valore none con uno dei seguenti valori:
underline: linea sotto il testo (sottolineato)
overline: linea sopra il testo
line-trough: linea che attraversa il testo (sbarrato)
blink: testo lampeggiante (non funzionante su Explorer e su Opera)
Top indica l'altezza in cui si proietterà l'immagine, quindi basta modificare 0 con il valore che riterrete più opportuno.
Poi inserite in Gestione Codici HTML (nella posizione che desiderate, ma io vi consiglio Codice HTML che verrà visualizzato solo nella homepage del sito, nel codice della vostra tabella in homepage) questo codice:CODICE<a class="thumbnail" href="LINK PROFILO STAFFER"><img src="LINK IMMAGINE FISSA" width="100px" height="66px" border="0"><span><img src="LINK IMMAGINE PROIETTATTA"></span></a>
Dovrete copiarlo ed incollarlo più volte a seconda di quanti sono i membri dello staff del vostro forum, stando attenti a cambiare le immagini nell'ordine desiderato. E' possibile variare la larghezza e l'altezza dell'immagine fissa variando i seguenti parametri:
width, cioè la larghezza;
height, cioè l'altezza.. -
denis pienes.
User deleted
Che bel post!!! . -
van-pecie.
User deleted
Denis!
.
