September 16
Potreste aver visto le immagini su pagine Web che ingrandite quando li si è fatto clic. Presentando una versione più piccola di un'immagine all'interno di un elemento DIV aiuta a preservare spazio prezioso pagina Web. I visitatori del sito possono quindi creare un'immagine più grande con lo zoom, se lo desiderano. Con la creazione di una funzione JavaScript che ottiene attributo "src" di un'immagine, si può dare agli utenti la possibilità di ingrandire un'immagine all'interno di un DIV come le corse di applicazioni Web.
1 Aprire il documento HTML usando un editor di testo o Notepad.
2 Posizionare questi due blocchi div nella sezione corpo del documento:
<Div class = "div1">
<Img id = "immagine1" alt = "Image1" />
</ Div>
<P> </ p>
<Div2 ">
<Img id = "image2" alt = "image2" />
</ Div>
Ogni blocco DIV include un'immagine. Ogni immagine ha un valore ID univoco. Sostituire "abc.jpg" e "def.jpg" con i nomi dei due immagini sul disco rigido.
3 Aggiungere il seguente codice alla sezione di script del documento:
var zoomFactor = 1.5;
immagini var = [
'Image1',
'Image2'
];
La variabile "zoomFactor" contiene il valore che determina il fattore di ingrandimento desiderato. Questo valore è 1.5. La matrice "immagini" contiene i valori ID delle due immagini definite nel corpo del documento.
4 Incollare la funzione "onload" sotto il codice mostrato nel passaggio precedente:
window.onload = function () {
addClickEvents;
}
addClickEvents function () {
for (var i = 0; i <images.length; i ++) {
document.getElementById (immagini [i]). onclick = function () {
zoomImage (document.getElementById (immagini [i]));
var xx = 1;
}}
}
Questa funzione "onload" corre dopo che la pagina termine del caricamento. Esso utilizza discreto JavaScript per aggiungere i gestori di eventi "onclick" per le due immagini. Posizionamento di gestori di eventi nella funzione "onload" consente di mantenere i gestori di eventi compilazione delle dichiarazioni dei tag del vostro sezione corpo. Ciò si traduce in codice markup pulito. Dopo questa funzione viene eseguito, ogni immagine contiene un "onclick" evento che chiama una funzione denominata "zoomImage" quando si fa clic.
5 Aggiungere la seguente funzione "zoomImage" JavaScript sotto il codice mostrato nell'ultimo passaggio:
Funzione zoomImage (immagine) {
image.height = image.height * zoomFactor;
image.width = image.width * zoomFactor;
}
Questa funzione ingrandisce l'immagine passato alla funzione.
6 Salvare il documento e aprirlo nel browser. Le due immagini appaiono.
7 Clicca una delle immagini. Le piste di codice e zoom dell'immagine per il fattore di ingrandimento si imposta quando si definisce la variabile "zoomFactor". In questo esempio, tale fattore di ingrandimento è 1.5.
8 Clicca l'altra immagine per verificare che ingrandisce anche quando si fa clic.