Vediamo come visualizzare immagini in un div, senza ricaricare la pagina.
Con poche righe di codice, e con l'ausilio di JavaScript, realizzeremo un semplice visualizzatore di foto, che non ricarica necessariamente tutto il codice della pagina. Utile ad esempio, per allegare più foto a un articolo.
Esempio:
Per realizzare questo semplice visualizzatore di foto, abbiamo bisogno di tre cose:
- Il codice JavaScript che prende l'url della foto cliccata e lo memorizza in una variabile
- Un menù di link alle foto da visualizzare
- Il <div id="fotozoom"> nel quale pubblicheremo la foto cliccata
Vediamo il codice
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Foto Show</title>
<script type="text/javascript">
<!--
function zoom(foto)
{
var image = foto;
document.getElementById('fotozoom').innerHTML='<img src=' + image + '>';
}
//-->
</script>
</head>
<body>
<ul>
<li><a href="#" onclick="javascript:zoom('2.jpg');">Foto 1</a></li>
<li><a href="#" onclick="javascript:zoom('3.jpg');">Foto 2</a></li>
<li><a href="#" onclick="javascript:zoom('1.jpg');">Foto 3</a></li>
</ul>
<div id="fotozoom"><img src="1.jpg" alt=""></div>
</body>
</html>
Spieghiamo
Il codice dalla riga 6 alla riga 14 memorizza il link al clic, lo rende una variabile e predispone il codice HTML da stampare per visualizzare la foto;Il codice HTML dalla riga 19 alla 23 serve soltanto a visualizzare un menù di esempio, che potremo ricreare a nostro piacimento;
Il div alla riga 25 serve a contenere la foto che sceglieremo con il clic sul menù.
Da notare che ho preimpostato la prima foto nel div, che ho anche riporposto sul link 3. Questo per fare in modo che alla prima visualizzazione della pagina ci sia già una prima foto visualizzata, senza dovere cliccare nulla.
Nessun commento:
Posta un commento