I.I.S.S. Alessandro Volta - Palermo
0 voti
quesito posto 8 Giugno 2017 in Tecnologie e Prog. di Sistemi Informatici e Tlc da GiovanniAdelfio (35 punti)
  

1 Risposta

0 voti

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:

<img ........ onclick="">

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:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

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

all'interno di un  tag <a>

<a >[x] </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)
684 domande
1,334 risposte
631 commenti
1,774 utenti