Javascript per il ridimensionamento immagini

[angeloulivieri]

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]

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

 

[angeloulivieri]

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]

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

 

[alessandro1997]

Ehm, non le puoi vedere con getElementByTagName semplicemente perché le definisci o con l'attributo background oppure tramite CSS.

 

[lotus]

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]

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?

 

[alessandro1997]

Allora prova ad utilizzare la proprietà:

document.getElementById('elemento').style

E tramite essa modifichi le proprietà CSS corrispondenti. Ricorda che se non sbaglio non tutte le proprietà hanno lo stesso nome.

 

[angeloulivieri]

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?

 

[alessandro1997]

Hai provato a specificare in percentuale i dati per la dimensione dell'immagine di background (sempre che ce ne siano )?

 

[lotus]

In alternativa ho pensato che potresti utilizzare

new Image([width,] [height])

creando in javascript un oggetto image e impostando width e height in maniera opportuna?
Per le proprietà dell'oggetto fai riferimento a
http://www.javascriptkit.com/jsref/image.shtml

 

[alessandro1997]

E poi come lo sostituisce alle immagini già esistenti?

 

[lotus]

scusami; non ho capito che intendi dire?

 

[angeloulivieri]

Hai provato a specificare in percentuale i dati per la dimensione dell'immagine di background (sempre che ce ne siano )?

no purtroppo lo sfondo nei CSS non offre questa possibilità. Solo di ereditare la dimensione ma nel mio caso non va bene .

 

[angeloulivieri]

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!

 

[alessandro1997]

Prova a mettere solamente background nel CSS, senza background-image.

 

[angeloulivieri]

Prova a mettere solamente background nel CSS, senza background-image.

Niente da fare...

 

[angeloulivieri]

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..

 

[alessandro1997]

Pensa che ho aperto questo topic proprio per dirti questo

 

[angeloulivieri]

Pensa che ho aperto questo topic proprio per dirti questo

Eh eh.. sei grande!

Grazie Alessandro..

Anche se questa soluzione non è il massimo della finezza...