CSS Popup Image Viewer
Anteprima:
Qui [Passare sul l'immagine in home page]
Per ottenere l'effetto che vi ho mostrato basta inserire in
Modifica Colori e Stili (per comodita' 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 */
}
Mentre se volete inserirlo in Gestione Codici HTML basta inserire questo codice nella sezione: Codici in cima al forum.
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>
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 semra 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.
-------------------------------------------------------------------------------------------------------------------------------------------------------------
Poi inserite in
Gestione Codici HTML (nella posizione che desiderate) questo codice:
CODICE
<a class="thumbnail" href="#"><img src="http://img181.imageshack.us/img181/4048/logopspcz6.png" width="100px" height="66px" border="0"><span><img src="http://img181.imageshack.us/img181/4048/logopspcz6.png"></span></a>
Per modificare l'immagine basta modificare tutte le parti del codice in cui ci sia:
CODICE
http://img181.imageshack.us/img181/4048/logopspcz6.png
con il link dell'immagine che preferite, ovviamente vanno modificate anche le dimensioni dell'immagine
width="100px" height="66px" con quelle dell'immagine da voi utilizzata
Guida creata interamente da me.
Codici prelevati da questo sito:
Qui
