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

Istruzioni

1

Avviare l'editor di HTML e aprire un documento HTML.

2

Aggiungere il seguente codice al documento:

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

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

In questo modo un'immagine nella pagina Web. Si noti che i valori per "altezza" e "larghezza" determinano le dimensioni dell'immagine in pixel. Impostare questi valori alla dimensione miniatura desiderata. Per esempio, se si desidera che l'unghia del pollice per essere 80 pixel di altezza e una larghezza di 90 pixel, impostare l'altezza della "80" e la larghezza su "90". Si noti che le proprietà "onmouseover" e "onmouseout" passano il valore di "id" dell'immagine a una funzione JavaScript denominata "SetSize."

3

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

var percentIncrease = 1,6;

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

4

Inserire il seguente codice sotto l'istruzione precedente:

Function () {SetSize (immagine, azione)

Se (azione = = "sopra") {

var newHeight = Math.round(image.height * percentIncrease);

newWidth var = Math.round(image.width * percentIncrease);

}

else {

var newHeight = Math.round(image.height / percentIncrease);

newWidth var = Math.round(image.width / percentIncrease);

}

Image.Style.Height = newHeight;

Image.Style.Width = newWidth;

}

Questa funzione di "SetSize" determina le dimensioni dell'immagine e li moltiplica per il fattore di "percentIncrease" quando si sposta il cursore del mouse sopra l'immagine di anteprima. Riduce le dimensioni quando il cursore si sposta dall'immagine.

5

Salvare il documento e aprirlo nel browser per vedere l'anteprima dell'immagine.

6

Sposta il cursore sopra la miniatura. Dimensione di miniatura aumenta il fattore che è impostato nel codice. Spostare il mouse lontano l'immagine ingrandita a restituirlo alla dimensione normale.

Consigli & Avvertenze

• Si noti che la funzione JavaScript consente di utilizzare fattori di zoom frazionaria come 1.6 e 2.7. Quando si sceglie un fattore di zoom, selezionare uno che non fa così grande che non si adatta nella pagina dell'immagine ingrandita. Se ciò accade, è possibile che gli utenti non sarà in grado di spostare i cursori dall'immagine di restituirlo alla sua normale dimensione miniatura.