|
|
| Codes prelevati da PubblicizzaforumVEDERE L'ANTEPRIMA DI UN'IMMAGINECSS Popup Image Viewer Anteprima: clicca su questo link e passa il mouse sull'immagine PSP basta inserire in Modifica Colori e Stili (alla fine) questo 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 */
} CITAZIONE 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.
-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-
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.
-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-
Padding indica la grandezza della cornice, quindi, se volete modificarla basta cambiare il valore 5 con il valore che preferite.
-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-
Left indica la posizione in cui si dovra' proiettare l'immagine, quindi se volete che esca a sinistra dovete mettere il segno - vicino al valore in pixel (px).
-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-
Border indica la grandezza di piccoli quadratini presenti sulla cornice, che 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 prima citati, quindi per cambiare colore basta modificare la scritta black con il colore che vi sembra giusto.
-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-
Text-decoration determina le decorazione 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 proiettera' l'immagine, quindi basta modificare 0 con il valore che riteniate piu' opportuno. inserendo questo codice: CODICE <a class="thumbnail" href="#"><img src="LINK IMMAGINE PICCOLA" width="100px" height="66px" border="0"><span><img src="LINK IMMAGINE GRANDE"></span></a> |
| | |
