/    Sign up×
Community /Pin to ProfileBookmark

rotate an image 90 degrees

Copy linkTweet thisAlerts:
Oct 10.2006

can i use javascript and probably css or dhtml to rotate a given image 90 degrees to the right?

i want it to simply spin in place until the top of the image is facing right.

i’m trying to code a function that will allow me to turn any image on the webpage to the right and back to its original position.

please note i don’t mean changing the src attribute to flip thru a slide show,
or to replace the image src with another that is already rotated, i want to actually turn the image right in the browser window so it looks like it toppled over and fell down, doesn’t have to be animated, it can just flip in one frame.

thanks guys.

by the way it only has to work in internet explorer.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@cyber1Oct 10.2006 — Take a look at this page:

[URL=http://www.walterzorn.com/rotate_img/rotate_img.htm?A=180]http://www.walterzorn.com/rotate_img/rotate_img.htm?A=180[/URL]
Copy linkTweet thisAlerts:
@felgallOct 10.2006 — That script simly stores copies of the image at all of the desired angles within the one image and just displays the part that shows it at the required angle. The script will not work with regular images. To be able to rotate images without having to create the images at those angles in the first place requires server side processing and can't be done in Javascript (unless you count using an Ajax call from Javascript to retrieve a replacement rotated image from the server dynamically).
Copy linkTweet thisAlerts:
@bsmbahamasauthorOct 10.2006 — i thought i read somewhere that you could rotate an image using dhtml,

i have a large database of images, 355 to be exact, they will act as playing cards, when a user clicks on a card(image), i want the card to turn on it's side in one frame, sorta like changing the source to another image that is already on its side, i can do that pretty easily by making copies of all the images on their side using a batch image converter program, but doubles the amount of space i'd need, not that space is a problem.

i was just hoping that there would be some function i could create that would allow me to flip the image i click on onto it's side.

i'll find a work around then, but if anybody else know how to do it, please reply.

thanks all.
Copy linkTweet thisAlerts:
@felgallOct 11.2006 — You can't do it with Javascript (and DHTML is just Javascript/CSS/HTML used together). There are graphics libraries in some server side languages that allow you to manipulate graphics but nothing that can run client side.
Copy linkTweet thisAlerts:
@bsmbahamasauthorOct 11.2006 — You can't do it with Javascript (and DHTML is just Javascript/CSS/HTML used together). There are graphics libraries in some server side languages that allow you to manipulate graphics but nothing that can run client side.[/QUOTE]


i know dhtml is a combo of javascript/css/and html, i had a really thick oreilly book on both javascript and dhtml, but i was thinking that i saw the image rotating code in the dhtml book.

i'll probably just fade the images or go ahead and batch rotate all of them and save them as alternative images, i think i have some software that does that already, cause i used it to batch resize all of them.

cheers.

p.s. i really like fellgal.com
Copy linkTweet thisAlerts:
@felgallOct 11.2006 — Image rotations using DHTML are done by replacing one image with another copy that shows the image in a different orientation.

There are ways to use server side processing to dymanically build images for delivery to the page which would be able to rotate the content. You could therefore set up a rotating image using just a single image if you use Ajax.
×

Success!

Help @bsmbahamas spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...