In html come faccio a inserire un'immagine che si visualizzi piccola nella pagina web ma appena ci clicchiamo su la vediamo per intero?

1 Risposta

L'effetto si può ottenere in vari modi te ne mostro uno:

diciamo che hai una img, cui hai associato delle dimensioni, coerenti con il layout grafico che hai implementato per il sito web in questione.

<img id="piccolo" src="tuo percorso" style=

width:piccolo px;

height:piccolo px;

a seguire inserisci un <div>, al quale associamo lo style come segue:

<div id ="grande" style="

visibility:hidden;

display:none;

z-index=999;

ed ovviamente all'interno del div, inseriamo un altro tag img, cui diamo lo style che segue:

<img src="tuo percorso" style="

width:grande px;

height:grande px;

"/>

al momento dunque, quando carichiamo la pagina, la versione grande non si vede, ma si vede solo la piccola.

torniamo sulla img piccola, ed aggiungiamo sul tag un evento:

onclick

vediamo:

dunque possiamo associare un frammento di codice js, che si attiva quando facciamo click sull'img piccola.

...onclick="

$("#grande").css("visibility", "visible");

$("#grande").css("display", "inline");

"...

il codice inserito è di tipo jquery, dunque si presume che tu abbia aggiunto all'header del tuo sito la riga che segue:

a seguire se vuoi, puoi inserire sempre all'interno del div, dopo la img una [x]

all'interno di un tag <a>

ovviamente inseriamo ancora una volta l'evento onclick

all'interno del quale posizioniamo un frammeno simile all'esempio precedente che invece rende nuovamente invisibile il div

..onclick="

$("#grande").css("visibility", "hidden");

$("#grande").css("display", "none");

"...

risposta inviata 8 Giugno 2017 da tonins Corsista (123 punti)

Fai il log in oppure registrati per aggiungere un commento.