Javascript: ridimensionare le immagini mantenedo le proporzioni [script rielaborato]

[b][code]Vi propongo oggi un aggiornamento allo script che presentai tempo fa su come ridimensionare le immagini usando un semplice script javascript.

I limiti della soluzione proposta precedentemente riguardavano il fatto che se un'immagine era più piccola della misura massima da noi stabilita questa diventava comunque di quella misura, la cosa è stata risolta con una semplice condizione "if ... else".
Altra debolezza/forza era il fatto che l'immagine doveva avere un id perché poi sia applicata l'azione di ridimensionare. Ciò è stato risolto usando, nel tag img, il "this" che restituisce l'oggetto stesso, in questo caso l'immagine.

vediamo quindi il codice molto semplice, da inserire nei tag script o in un file .js:

function img_rid(self, largh, alt) {


var largh_or = self.width;
var alt_or = self.height;

if( (largh_or > largh) || (alt_or > alt) ) {



// se è orrizontale
if(largh_or >= alt_or) {
var alt_new = largh * alt_or / largh_or;
self.width = largh;
self.height = alt_new;
}
// se è verticale
else if(alt_or > largh_or) {
var largh_new = largh_or * alt / alt_or;
self.width = largh_new;
self.height = alt;
}
}
}


nell'HTML non serve inserire un id ma è sufficiente:

<img onload="img_rid(this, '500', '400')" src="http://www.esempio.it/cartella/immagine.jpg" />


Alcune precisazioni:
- è necessario mettere prima "onload" e poi "src" altrimenti potrebbe causare problemi con IE;
- i valori "500" e "400" indicano la misura massima della larghezza e dell'altezza che può avere l'immagine, se non li supera l'immagine rimarrà delle proprie misure.

Può pero ora sorgere un'esigenza, se noi volessimo vedere l'immagine a dimensioni originali? cioè ingrandita? (come ho fatto in questo sito)
Basta aggiungere un "if" che in caso di riduzioni delle dimensioni con un click è possibile vedere l'immagine a dimensioni originali.
Lo script precedente diventa quindi:

function img_rid(self, largh, alt) {


var largh_or = self.width;
var alt_or = self.height;

if( (largh_or > largh) || (alt_or > alt) ) {

if(document.all) { /* se è IE */
self.onclick = function() {
img_big(this);
}
}
else {
self.setAttribute("onClick", "img_big(this)");
}

self.title = "Clicca per ingrandire";


// se è orrizontale
if(largh_or >= alt_or) {
var alt_new = largh * alt_or / largh_or;
self.width = largh;
self.height = alt_new;
}
// se è verticale
else if(alt_or > largh_or) {
var largh_new = largh_or * alt / alt_or;
self.width = largh_new;
self.height = alt;
}
}
}


la funzione "img_big(this)" che viene richiamata non la scriverò in questo tutorial, ma, una volta perfezionata, vi aggiornerò.