Discussion :

[suprateam]

Bonsoir,
Je viens demander de l'aide car après de multiple recherche je n'ai pas trouvé ma réponse.

Le contexte est, j'ai une image avec comme id="pic" c'est une bouteille

Et je souhaite suivant ou je suis dans mon site lui appliquer une rotation de -90 donc la passer à l'horizontal et aussi diminuer sa hauteur (ou largeur d'origine) à 60 pixel tout en gardant les proportion.

Et le tout sur ie et firefox !!!

Si quelqu'un peut m'apporter ses lumières ?

Merci

[SpaceFrog]

javascript ne permet par la rotation directement
il y a bien un plugin jquery mais je ne me demande si il n'est pas backed par du flash ...
Ou bien encore regarde du coté de svg et transform ?
Sinon tu peux passer par un canvas ou flash ...

[psychomatt]

Pourquoi ne pas gérer simplement 2 images différentes (ou un sprite CSS mais l'idée est la même) ?

[RomainVALERI]

Pourquoi ne pas gérer simplement 2 images différentes (ou un sprite CSS mais l'idée est la même) ?

Oui je pensais plutot à ça aussi, parce qu'à l'exécution comme l'évoque SF ça risque d'apporter pas mal de contraintes... ^^

[Invité]

et une rotation a 270° (-90°) en javascript ca donne sa

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
var el=document.getElementById("monelement")
 
el.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'
el.style.MozTransform='rotate(270deg)';
el.style.WebkitTransform='rotate(270deg)';
el.style.OTransform='rotate(270deg)';
el.style.transform='rotate(270deg)';

[RomainVALERI]

et une rotation a 270° (-90°) en javascript ca donne sa

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

...

j'adore ^^

En compatibilité sur les différentes browsers/versions plus ou moins anciennes, ça passe correct ou pas ? (là je suis au boulot, je testerai ce soir mais c'est par curiosité ^^)

(Bon ben j'ai pas aidé grand monde aujourd'hui mais... j'en aurai appris deux tonnes )

[suprateam]

et une rotation a 270° (-90°) en javascript ca donne sa

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
var el=document.getElementById("monelement")
 
el.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'
el.style.MozTransform='rotate(270deg)';
el.style.WebkitTransform='rotate(270deg)';
el.style.OTransform='rotate(270deg)';
el.style.transform='rotate(270deg)';

Bonsoir,
Et d'abord merci à tous pour votre participation.

Effectivement j'avais fait des tests avec le css qui arrive à réaliser ce que tu suggéres mais le problème est que mon image doit avoir une largeur fixe lors de la bascule/rrotation fait qu'il perd cette affectation de largeur qui devrait devenir hauteuret donc me décale tt sur ma page !

Je sais si je suis clair ...

[suprateam]

Bonsoir,
Et d'abord merci à tous pour votre participation.

Effectivement j'avais fait des tests avec le css qui arrive à réaliser ce que tu suggéres mais le problème est que mon image doit avoir une largeur fixe lors de la bascule/rrotation fait qu'il perd cette affectation de largeur qui devrait devenir hauteuret donc me décale tt sur ma page !

Je sais si je suis clair ...

Et donc je cherche rotation plus changement de la hauteur en gardant les proportion ... Pas évident ... Et pas 2 images car je fais du dynamique

[suprateam]

javascript ne permet par la rotation directement
il y a bien un plugin jquery mais je ne me demande si il n'est pas backed par du flash ...
Ou bien encore regarde du coté de svg et transform ?
Sinon tu peux passer par un canvas ou flash ...

Oui mais comment de maniéré dynamique c'est à dire je prend aléatoire une photo je la retourne et la redimensionne ?

[bewidia]

A part un traitement coté serveur, je ne vois pas. Selon les paramètres fournis (dimension, rotation), le serveur prend l'image, la modifie et renvoie un flux image.