<p align="center">
Immagini che si ingrandiscono al passaggio del mouseDesiderate ottenere l'effetto che al passaggio del mouse l'immagine della vostra tabella si ingrandisca? Seguite il tutorial e riuscirete a farlo.
Procediamo spiegando i vari passi da seguire.
Potete scegliere indifferentemente il Procedimento 1 o il Procedimento 2, il passo finale sarà poi il medesimo.
Procedimento 1:Inserire in Modifica colori e stili il seguente codice, la posizione è indifferente, ma suggerisco di metterlo alla fine, per trovarlo più facilmente in futuro.
CODICE
/*Credits: Dynamic Drive CSS Library */
/*URL: [URL=http://www.dynamicdrive.com/style/]http://www.dynamicdrive.com/style/[/URL] */
.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 */
}
N.B.: Al primo cambio di skin (cambio del CSS) tale codice sparirà.
Procedimento 2:Inserire il codice seguente in Gestione codici HTML, nel box Codice html che verrà visualizzato in ogni pagina in cima al forum:
CODICE
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: [URL=http://www.dynamicdrive.com/style/]http://www.dynamicdrive.com/style/[/URL] */
.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>
Passiamo ora all'analisi del codice, delle sue parti, per poterlo personalizzare come meglio si vuole.
1° pezzoCODICE
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
Il background-color fa riferimento allo sfondo del testo, per modificarlo si deve sostituire transparent col codice di un colore.
2° PezzoCODICE
.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;
}
#
background-color: lightyellow; indica il colore di sfondo del box contenente l'immagine ingrandita, modificando lightyellow si modificherà tale colore.
#
padding: 5px è la grandezza della cornice dell'immagine ingrandita, per cambiare tale grandezza modificare il numero 5 con uno a proprio piacimento.
#
left: -1000px fa riferimento alla posizione che avrà l'immagine ingrandita, modificate il valore e ricordate il segno - (meno) davanti a tale valore.
#
border: 1px dotted gray è il codice della cornice che avrà l'immagine ingrandita, per aumentare la grandezza modificare 1px con un valore a piacimento, per modificare il tipo di cornice cambiare dotted con uno dei seguenti valori: none; dashed; solid; double; groove, provare per vedere gli effetti.
# Per modificare il colore della cornice modificare
color: black; col colore che si desidera.
#
text-decoration: none indica la decorazione che possiamo dare al testo sotto all'immagine ingrandita, per esempio sottolineato, lampeggiante, sbarrato, per modificarlo bisogna sostituire none (equivalente a nessun effetto) con uno dei valore seguenti:
underline: linea sotto il testo (sottolineato)
overline: linea sopra il testo
line-trough: linea che attraversa il testo (sbarrato)
blink: testo lampeggiante.
3° PezzoCODICE
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
#
top: 0 si riferisce all'altezza dove si proietterà l'immagine ingrandita, modificare 0 con un numero.
Passo finaleUna volta scelto quale procedimento usare (sono indifferenti) , e personalizzato il codice per fare funzionare l'ingrandimento, bisogna inserire le immagini, e il codice che le farà ingrandire.
Il codice da inserire è il seguente:
CODICE
<a class="thumbnail" href="#"><img src="http://immagine_piccola" border="0"><span><img src="immagine_ingrandita"></span></a>
Come è intuibile al posto di
http://immagine_piccola bisogna mettere il link dell'immagine piccola, mentre al posto di
http://immagine_ingrandita il link dell'immagine ingrandita.
Si può inoltre modificare il collegamento che tale immagine avrà, basta sostituire href="#" con un link, ad esempio href="https://pokemondarkdestiny.forumcommunity.net/" link al nostro forum.
