Pivoter à 90° une image avec un click

Pivoter à 90° une image avec un click - HTML/CSS - Programmation

Marsh Posté le 21-03-2008 à 14:56:31    

Bonjour,
 
J'ai une image auquel j'ai affecté un id. Je voudrais une fonction qui permet de faire pivoter mon image sur l'évènement onclick. Je peux coder qu'en JavaScript.
 
J'ai cherché dans les forums ainsi que les tutoriaux pour connaître les propriétés possibles pour une image.
J'ai trouvé document.images qui permet de récupérer un tableau de références.
 
Mais j'ai la nette impression qu'il n'est pas possible de faire ceci en javascript. Est-ce bien vrai?
 
Sinon avez vous une solution?

Reply

Marsh Posté le 21-03-2008 à 14:56:31   

Reply

Marsh Posté le 21-03-2008 à 15:18:21    

Reply

Marsh Posté le 21-03-2008 à 15:29:04    


Je te remercie pour le lien mais je l'avais déjà vu et je pensais qu'il y avait quelque chose de plus simple qui existait.
 
En effet, pour faire une simple rotation, ce code est un peu long et je ne le comprend pas très bien
 
Merci quand même

Reply

Marsh Posté le 21-03-2008 à 15:36:56    

Reply

Marsh Posté le 21-03-2008 à 15:58:19    

Je ne pense pas que ce soit possible en javascript seul.
Je n'ai que 2 solution en tete :  
Creer les images que tu as besoin avec toshop par exemple et onclick, appeler l'image rotée (oui ca se dit comme ça). Pas terrible.
2eme solution, appeler un script php (par ex) qui avec la GD rote l'image (oui ca se dit comme ca aussi). Pas quasi instantané, faut attendre que le serveur traite l'image. Mais a priori ça ne te convindras pas.
 
Désolé je ne vois que ca.
Si à tout hasard tu trouves une solution 100% js, laisse moi un mp avec la solution, ca m'interesse.
Bon courage


---------------
Pays et country_code traduits : https://www.iso-country-code.com
Reply

Marsh Posté le 21-03-2008 à 16:50:25    

mon lien au dessus de ta reponse tu l'aimes pas ? fonctionne en 3 minutes et le tout en js...

Reply

Marsh Posté le 21-03-2008 à 16:59:36    

texaff a écrit :

mon lien au dessus de ta reponse tu l'aimes pas ? fonctionne en 3 minutes et le tout en js...


 

Citation :

To make an image rotatable, the script internally re-composes the image by width x height DIV elements (for example, 629 for a tiny 37px x 17px image), each containing the original image, but clipped in a manner that only the required pixel is visible.


 
je sais aps si c'ets une bonne idée avec des images de taille importante ( ne serait ce que 800x600 , ca fait 480 000 div imbriqués)


---------------

Reply

Marsh Posté le 21-03-2008 à 17:22:36    

effectivement j'avais pas pris le tps de regarder en profondeur... a oublier donc 480 000 div imbriqué = page d'au moins 480 000 * 15 ou 20 octets minimum ca fait un peu lourd lol

Reply

Marsh Posté le 21-03-2008 à 17:57:15    

Avec les extensions CSS d'IE, y'a un truc pour faire des rotations.
Reste à savoir si y'a un équivalent en CSS2 ou CSS3... Si oui, bah en espérant que l'utilisateur à un navigateur récent, et en faisant un peut de porçage (non ça se dit certainement pas comme ça), y'a moyen de le faire en JS/CSS uniquement. L'intérêt, c'est que c'est 100% côté client, et que ça bouffera quasiment aucune ressource, même pour une très grosse image (genre si c'est l'extension de Microsoft, tu fais une instruction directe à DirectX, y'a pas trop moyen de faire plus léger ;))
 
http://msdn2.microsoft.com/en-us/library/ms533014.aspx
quoique celui-là est plus simple à utiliser...
http://msdn2.microsoft.com/en-us/l [...] S.85).aspx


Message édité par MagicBuzz le 21-03-2008 à 18:10:39
Reply

Marsh Posté le 21-03-2008 à 21:15:10    

Tu peux faire ca avec les canvas de FF mais c'est pas supporté par IE

Reply

Marsh Posté le 21-03-2008 à 21:15:10   

Reply

Marsh Posté le 26-03-2008 à 09:03:06    

Merci pour toute vos réponses.
 
Je pense que je vais me rabattre sur la solution de "ragondin" : "Creer les images que tu as besoin et onclick, appeler l'image rotée "
 
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed