Javascript per il ridimensionamento immagini

angeloulivieri

Utente Attivo
8 Set 2009
71
0
0
Ciao a tutti,
esiste un modo o funzioni js che permettano di modificare la risoluzione o la grandezza delle immagini in una pagina web?
Cioè vorrei che a seconda della risoluzione dell'utente tutte le immagini cambino risoluzione in percentuale. Come si può fare?
 

lotus

Utente Attivo
5 Mag 2009
543
8
0
Ciao,
a questo indirizzo c'è un esempio:
http://articles.sitepoint.com/article/resize-popup-fit-images-size

In realtà, esistono vari approcci basati sulle propietà width e height degli elementi image di javascript.
Es. document.images[0].width
Tramite i valori width e height della windows
es. window.innerWidth:document.body.clientWidth
puoi indirividuare altezza e larghezza della finestra.

In questo modo puoi calcolare la propoerzione di largghezza e altezza dell'immagine e applicare i valori (document.images[0].width)
Attenzione: Ti consiglio di fare delle verifiche per verificare che l'altezza e la larghezza non siano superiori a quelle originali dell'immagine altrimenti questa non verrà visualizzata correttamente

Spero di esserti stato d'aiuto
Ciao Ciro
 
Ultima modifica:

angeloulivieri

Utente Attivo
8 Set 2009
71
0
0
Ciao,
a questo indirizzo c'è un esempio:
http://articles.sitepoint.com/article/resize-popup-fit-images-size

In realtà, esistono vari approcci basati sulle propietà width e height degli elementi image di javascript.
Es. document.images[0].width
Tramite i valori width e height della windows
es. window.innerWidth:document.body.clientWidth
puoi indirividuare altezza e larghezza della finestra.

In questo modo puoi calcolare la propoerzione di largghezza e altezza dell'immagine e applicare i valori (document.images[0].width)
Attenzione: Ti consiglio di fare delle verifiche per verificare che l'altezza e la larghezza non siano superiori a quelle originali dell'immagine altrimenti questa non verrà visualizzata correttamente

Spero di esserti stato d'aiuto
Ciao Ciro
Grazie... però ho un ulteriore problema che non riesco a risolvere.
Io ho creato nella mia pagina una tabella e in alcune parti della tabella ci sono immagini di sfondo. Queste immagini non vengono modificate dallo script perché forse non appartengono a document.image[].
Sai come fare per ridurle proprio tutte?
 

lotus

Utente Attivo
5 Mag 2009
543
8
0
document.getElementByTagName restituisce tutti gli item cn ik tag specificato tuttavha images le dovrebbe restìtuire tutte.forse il problema è un altro cmq prova , fammi saxe
 

lotus

Utente Attivo
5 Mag 2009
543
8
0
scusami non avevo capito che erano proprietà css o background..
credevo fossero immagini all'interno fdella tabella. ecco xkè non mi spiegavo xkè non le vedevi.

sono definite nel css?
 

angeloulivieri

Utente Attivo
8 Set 2009
71
0
0
eh si.. praticamente si. Perché le chiamo con uno style

<td rowspan="4" valign="top" style=" background-image:url('img/rigoMid.jpg');
background-repeat: repeat-y;" >

anche se prima era:

<td rowspan="4" valign="top" backgrounds="img/rigoMid.jpg" style="
background-repeat: repeat-y;" >

ma sia nel primo che nel secondo caso. Come potrei fare il ridimensionamento automatico tramite javascript? o non è possibile?
 

angeloulivieri

Utente Attivo
8 Set 2009
71
0
0
Allora prova ad utilizzare la proprietà:

E tramite essa modifichi le proprietà CSS corrispondenti. Ricorda che se non sbaglio non tutte le proprietà hanno lo stesso nome.
Sorry ma:
document.getElementById('menu').style
non ha poi un attributo per modificare l'immagine di background. Al massimo dovrei proprio "cambiarla" in questo modo. Cioé prevedere un'immagine di dimensioni diverse e sostituirla qualora la risoluzione cambi.

Ma per un ridimensionamento automatico come con tutte le altre immagini?
 

angeloulivieri

Utente Attivo
8 Set 2009
71
0
0
Ragazzi sto fatto è proprio un guaio!
Tu dici di usare un oggetto Image. Ma poi come lo adopero nella pagina?
io avevo pensato di tagliare la testa al toro e usare due immagini diverse che uso in due css diversi. Questi due css sono richiamati tramite controllo sulla risoluzione. Solo che NON FUNZIONA.. ke palle!!

Non so perché se scrivo:
<td rowspan="6" width="350px" valign="top" style=" background-img:url('img/rigo.jpg'); background-repeat: repeat-y">

l'immagine me la trova tranquillamente nel file html.

Ma se creo il css e ci metto:

.imageRigo{
background-image: url('img/rigo.jpg');
background-repeat: repeat-y;
}

e nel file html
<td rowspan="6" width="350px" valign="top" class="imageRigo">


NON CARICA L'IMMAGINE... assurdo!
 

angeloulivieri

Utente Attivo
8 Set 2009
71
0
0
ragazzi ho risolto con l'utilizzo di due css e due immagini diverse. quella cosa che ho sritto prima non funzionava perché l'immagine deve essere nella stessa cartella del css e invece io la richiamavo da un altra cartella o comunque con un percorso che lui non trovava.
grazie comunque..