Immagini che si ingrandiscono al passaggio del mouse

Immagini che si ingrandiscono al passaggio del mouse

Se usufruite di questo codice siete pregati di postare qui linkando il forum dove userete il codice. In questo modo potremo anche aiutarvi nel caso abbiate bisogno. Grazie!

Desiderate ottenere l'effetto che al passaggio del mouse l'immagine della vostra tabella si ingrandisca? Seguite il tutorial e riuscirete a farlo.

Anteprima e codice disponibili qui: Dynamicdrive , passare col mouse sulle due immagini.

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.

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:


Passiamo ora all'analisi del codice, delle sue parti, per poterlo personalizzare come meglio si vuole.

1° pezzo

Il background-color fa riferimento allo sfondo del testo, per modificarlo si deve sostituire transparent col codice di un colore.

2° Pezzo


# 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° Pezzo


# top: 0 si riferisce all'altezza dove si proietterà l'immagine ingrandita, modificare 0 con un numero.

Passo finale
Una 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:

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="https://pokemontheorigins.forumcommunity.net/#" con un link, ad esempio href="" link al nostro forum.

Immagini che si ingrandiscono al passaggio del mouse - Pop up Image Viewer