Con lo script che presentiamo è possibile effettuare lo zoom di una piccola thumbnail con un semplice click. La visualizzazione dell'esempio allegato chiarirà sicuramente il suo funzionamento e suggerirà le moltissime possibilità di implementazione
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
All'interno della sezione <head></head> inseriamo il codice Javascript che gestisce la visualizzazione con zoom. Si tratta di uno script suddiviso sostanzialmente in due parti. La prima è necessaria per testare il supporto sui diversi browser. Operazione utilissima e che garantisce una piena compatibilità con browser recenti e più datati. È intutile riportare per intero il codice in questione. Passiamo alla seconda parte dello script.
function move_div(x,y){
if (isNaN(x+y))return
if(ns4){div1.moveTo(x,y)}else{div1.style.left=x+'px';div1.style.top=y+'px';}
}
function write_div(text){
if(ns4){
div1.document.open();
div1.document.write(text);
div1.document.close();
}
else {div1.innerHTML=text;}
}
function big(n){
ondiv=n
write_div("<a href=javascript:void(0) onmouseout='big_hide()' onmouseover='ondiv=1'><img border="0" name=ib src="+n+"/></a>");
move_div(x,y)
}
function big_hide(){
ondiv=0;
t3=window.setTimeout('big_hide2()',100)
}
function big_hide2(){
if (ondiv==0){
write_div("");
move_div(-1000,-1000)}
}
Questa serie di funzioni gestisce le due fasi essenziali: la visualizzazione dell'immagine ingrandita e la sua scomparsa. Nell'esempio abbiamo utilizzato come evento attivatore 'onclick', ma nulla impedisce di usare, ad esempio, 'onmouseover'. L'immagine viene racchiusa in un div creato direttamente dallo script: necessario per effettuare un posizionamento migliore. il div con all'interno l'immagine apparirà in prossimità del cursore. Scompare quando perde il focus dopo un periodo di tempo settato all'interno della funzione big_hide().
La cosa positiva dello script è che può essere lasciato intatto, nessuna modifica è necessaria, a meno di non volrsi avventurare in una personalizzazione spinta. Basta il classico Copia e Incolla, insomma.
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Nel corpo della pagina troveremo la miniatura:
<a href="javascript:big('rosa.jpg')" onmouseout="big_hide()"><img border="0" name="i3" src="rosa_small.jpg"/></a>
Codice semplicissimo. Intorno al tag 'img' troviamo un link che ovviamente non punta ad un file ma che richiama le funzioni Javascript che ci interessano. Nell'attributo 'href' c'è il richiamo alla funzione 'big': il parametro da passare (fondamentale!) è l'URL dell'immagine ingrandita. Co l'evento onmouseout, infine, attiviamo la funzione 'big_hidè che nasconde tutto e riporta alla situazione di partenza.
