PRIMO METODO
Inserire un semplice collegamento all'immagine ingrandita: il risultato può vedersi cliccando su una delle due immagini visualizzate qui sotto:
![]() | ![]() | Clicca su un'immagine per vederla ingrandita |
Il codice per ottenere un effetto del genere è semplicissimo:
<a href="Baldo4.jpg" target=_blank><img src="Baldo4p.jpg" height=49 width=49></a><a href="Eddie.jpg" target=_blank><img src="Eddiep.jpg" height=49 width=49></a>
SECONDO METODO
Visualizzare le immagini in una finestra pop up: in questo caso abbiamo aggiunto all'esempio altre due immagini. Queste sono di misura diversa e ci piacerebbe adattare ogni volta la pagina alle dimensioni dell'immagine ingrandita.
Osservare il risultato cliccando sulle immagini in basso:
![]() | ![]() | ![]() | ![]() | Clicca su un'immagine per vederla ingrandita |
Il codice per ottenere un effetto del genere richiede javascript, da inserire fra i tags <head> ed </head> :
<script language="JavaScript">Indica che si sta per inserire uno script in JavaScript
| lista=new Array('<img src="Baldo4.jpg" width=196, height=195>','<img src= "Eddie.jpg"width=196, height=195>' '<img src= "pae1.jpg" width=298, height=206>','<img src= "uccello.jpg" width=172, height=91>')
| Vengono memorizzate ordinatamente nella variabile strutturata di nome lista gli ingrandimenti delle immagini: in questo modo lista[0] indica "< img src="Baldo4.jpg" width=196, height=195>, lista[1] indica "< img src=Eddie.jpg" width=196, height=195> e così via. (Inserire, ovviamente, l'indirizzo completo delle immagini e le loro dimensioni effettive)
| titolo= new Array("Baldo", "Eddie", "Camilla", "Pippo") | Abbiamo prevista anche questa variabile per memorizzare i titoli da dare alle varie finestre: se non si vuole inserire un titolo questa riga si può omettere.
| maxL=new Array(220,220,322,196) | Nella variabile strutturata di nome maxL memorizziamo ordinatamente la larghezza delle varie finestre: scegliamo tali valori di almeno 20 - 30 pixel maggiori dalla larghezza delle immagini.
| maxH=new Array(250,250,260,150) | Nella variabile strutturata di nome maxH memorizziamo ordinatamente l'altezza delle varie finestre: scegliamo tali valori di almeno 50 - 60 pixel maggiori dall'altezza delle immagini, tenendo conto dello spazio che viene comunque lasciato all'inizio del documento.
| function apri(conta) { | Si chiama la funzione apri(conta): apri è il nome della funzione, mentre conta è un parametro che, come vedremo, indicherà il numero di immagine da visualizzare. La parentesi graffa (obbligatoria) indica l'inizio della funzione.
| L=maxL[conta] | Nella variabile di nome L memorizziamo la larghezza della finestra che conterrà l'immagine da ingrandire.
| H=maxH[conta] | Nella variabile di nome H memorizziamo l'altezza della finestra che conterrà l'immagine da ingrandire.
| finestra= window.open('prova.htm','nome', 'width=400, height=400') | Viene aperta una nuova finestra di larghezza ed altezza entrambe di 400 pixel (è necessario inserire questi dati altrimenti MSIE apre finestre complete di barre degli strumenti, barre di scorrimento e così via. APPROFONDIMENTO). Il tutto viene assegnato alla variabile di nome finestra.
| finestra.focus() | Metodo JavaScript che pone in primo piano la finestra pop up.
| finestra.resizeTo(L,H) | Metodo JavaScript che ridimensiona la pagina all'altezza ed altezza memorizzate in parentesi. finestra è il nome della nostra variabile, il punto è obbligatorio per motivi sintattici, resizeTo è una parola riservata JavaScript; (L,H), infine, sono le variabili nelle quali avevamo memorizzato rispettivamente larghezza ed altezza della finestra.
| finestra.document.write('<html><title>'+titolo[conta]+'</title><body>' + lista[conta] +' </body></html>')
| Viene predisposto il codice necessario per visualizzare le pagina: in questo caso si tratta di una semplice pagina con il titolo e l'immagine opportuna.
| finestra.document.close() | Metodo JavaScript che comunica al browser che la scrittura del document della pagina finestra è terminato.
| } | Parentesi di chiusura della funzione.
| </script> | Fine script.
| |
Ora non resta che inserire le immagini piccole da cliccare con il seguente codice:
<a href="javascript:apri(0)"><img src="Baldo4p.jpg" height=49 width=49></a> <a href="javascript:apri(1)"><img src="Eddiep.jpg" height=49 width=49> <a href="javascript:apri(2)"></a> '<img src= "pae1pic.jpg" width=49, height=49></a><a href="javascript:apri(3)"><img src= "uccellop.jpg" width=49, height=49>></a>Come si vede dal codice, cliccando sulla prima immagine si chiama la funzione apri(0), mentre cliccando sulla seconda si chiama la funzione apri(1) e così via. La funzione è sempre la stessa, mentre cambia il parametro in parentesi: a seconda del valore del parametro si vedrà una diversa immagine, ognuna in una finestra ad essa appropriata. Nulla vieta di migliorare il programma presentato aggiungendo più immagini o migliorando la finestra, con colore di sfondo o altro.
©2002 www.webfract.it