Uno dei segreti per l'ingrandimento delle immagini senza distorsioni è quello di utilizzare ridimensionamento proporzionale, o aumentando le dimensioni orizzontali e verticali di un'immagine dello stesso fattore percentuale. Le miniature, che sono piccoli versioni di immagini più grandi, consentono di inserire molte immagini in una pagina Web, e gli utenti possono quindi visualizzare versioni più grandi di quelle immagini facendo clic su un pulsante o tiene i relativi cursori sopra le miniature. Un modo per visualizzare le immagini ingrandite di alta qualità è quello di utilizzare la stessa immagine per il pollice e la versione ingrandita. Creare questo effetto zoom con un semplice trucco JavaScript.

istruzione

1 Avviare il editor HTML e aprire un documento HTML.

2 Aggiungere il seguente codice al documento:

<Img id = "Image1" height = "100" width = "100"

onmouseover = "SetSize (questo, 'over')" onmouseout = "SetSize (questo, 'out')" />

Questo pone una immagine nella pagina Web. Si noti che i valori di "altezza" e "larghezza" determinano dimensioni dell'immagine in pixel. Impostare questi valori per la dimensione miniatura desiderata. Per esempio, se si desidera che il miniatura per essere di 80 pixel di altezza e 90 pixel di larghezza, impostare l'altezza a "80" e la larghezza a "90." Si noti che il "onmouseover" e "onmouseout" proprietà sia passare il valore "id" dell'immagine di una funzione JavaScript denominata "SetSize."

3 Aggiungere questo codice JavaScript alla sezione "script" del documento:

var PercentIncrease = 1,6;

La variabile "PercentIncrease" determina fattore di ingrandimento dell'immagine. In questo esempio, questo fattore è 1,6, e provoca dimensioni della miniatura per aumentare 1,6 volte. Modificare tale valore a qualcosa che ti piace.

4 Inserire il codice seguente al di sotto della precedente dichiarazione:

Funzione SetSize (immagine, azione) {

se (azione == "over") {

var = newheight Math.round (image.height * PercentIncrease);

var = newwidth Math.round (image.width * PercentIncrease);

}

altro {

var = newheight Math.round (image.height / PercentIncrease);

var = newwidth Math.round (image.width / PercentIncrease);

}

image.style.height = newheight;

image.style.width = newwidth;

}

Questa funzione "SetSize" determina le dimensioni dell'immagine e li moltiplica per il fattore "PercentIncrease" quando un cursore del mouse sull'immagine in miniatura sopra. Si riduce quelle dimensioni quando il cursore si allontana dall'immagine.

5 Salvare il documento e aprirlo nel browser per visualizzare l'immagine in miniatura.

6 Spostare il cursore sulla miniatura. Della miniatura dimensione aumenta il fattore impostato nel codice. Spostare il mouse dall'immagine ingrandita per tornare a dimensioni normali.

Consigli e avvertenze

• Si noti che la funzione JavaScript consente di utilizzare fattori di zoom frazionali come la 1.6 e 2.7. Quando si sceglie un fattore di zoom, selezionare uno che non fa l'immagine ingrandita così grande che non si adatta alla pagina. Se ciò accade, gli utenti non saranno in grado di spostare i loro cursori dalla immagine per tornare alla sua normale dimensione delle miniature.