aprire una nuova pagina ridimensionata con un'immagine ingrandita a scelta con javascript- di Eliana Argenti e Tommaso Bientinesi

APRIRE UNA NUOVA PAGINA WEB CON UN'IMMAGINE INGRANDITA A SCELTA

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>

Le opzioni target=_blank inserite nei collegamenti fanno sì che le immagini vengano caricate in una nuova finestra: se invece si preferisce visualizzare le immagini nella finestra attuale, basta togliere questa opzione.
Le opzioni width ed height riguardano larghezza ed altezza delle immagini.

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.