Cambia la dimensione dell’immagine con JavaScript

Sto cercando di cambiare la dimensione di un’immagine con JavaScript. Il file jS è separato dalla pagina HTML.

Voglio impostare l’altezza e la larghezza di un’immagine nel file JS. Qualche buon modo per farlo?

Una volta che hai un riferimento alla tua immagine, puoi impostarne l’altezza e la larghezza in questo modo:

var yourImg = document.getElementById('yourImgId'); if(yourImg && yourImg.style) { yourImg.style.height = '100px'; yourImg.style.width = '200px'; } 

Nel codice HTML, sarebbe simile a questo:

 alt tags are key! 

Puoi modificare gli attributi effettivi di larghezza / altezza in questo modo:

 var theImg = document.getElementById('theImgId'); theImg.height = 150; theImg.width = 150; 

Se desideri ridimensionare un’immagine dopo che è stata caricata, puoi collegarla all’evento onload del tag . Nota che potrebbe non essere supportato in tutti i browser ( le affermazioni di riferimento di Microsoft fanno parte della specifica HTML 4.0, ma le specifiche HTML 4.0 non elencano l’evento onload per ).

Il codice sotto è testato e funziona in: IE 6, 7 e 8, Firefox 2, 3 e 3.5, Opera 9 e 10, Safari 3 e 4 e Google Chrome:

   

Cambiare un’immagine è facile, ma come si può tornare alla dimensione originale dopo che è stata cambiata? Puoi provare a cambiare tutte le immagini di un documento alla dimensione originale:

 var i, L = document.images.length;
 for (i = 0; i 

puoi vedere il risultato qui In questo semplice blocco di codice puoi cambiare la dimensione della tua immagine e ingrandirla quando il mouse entra sopra l’immagine e tornerà alla sua dimensione originale quando te ne vai.

html:

 

file js:

 var b=0; function fifo() { if(b==0){ document.getElementById("f").width = "300"; b=1; } else { document.getElementById("f").width = "100"; b=0; } } 
 // This one has print statement so you can see the result at every stage if you would like. They are not needed function crop(image, width, height) { image.width = width; image.height = height; //print ("in function", image, image.getWidth(), image.getHeight()); return image; } var image = new SimpleImage("name of your image here"); //print ("original", image, image.getWidth(), image.getHeight()); //crop(image,200,300); print ("final", image, image.getWidth(), image.getHeight());