472,101 Members | 1,427 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,101 software developers and data experts.

Rotate pictueres in html Document

Is it possible and how to rotate pictures in HTML document

Thank you,
Samuel
Feb 9 '07 #1
8 16634
Samuel Shulman wrote:
Is it possible and how to rotate pictures in HTML document

Thank you,
Samuel

In straight HTML -- no. In straight HTML+Javascript No.

IE has some CSS filters which may do this but it's propriatary to IE and
won't work in other browsers (And IE no longer commands a 90%+ market
share).

The only real way to do what you want is to use server side scripts to
rotate the image.

In PHP rotating an image is as simple as this.

http://somedomain.com/rotate.php?feed=image.jpg&rot=90

<?php
// File and rotation
$filename = $feed;
$degrees = $rot;

// Content type
header('Content-type: image/jpeg');

// Load
$source = imagecreatefromjpeg($filename);

// Rotate
$rotate = imagerotate($source, $degrees, 0);

// Output
imagejpeg($rotate);
?>

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA
Feb 9 '07 #2
I was refering to the second option
Or even better that the page will change the images using a timer

Thank you,
Sam

"David Gillen" <Be****@RedBrick.DCU.IEwrote in message
news:sl*******************@murphy.redbrick.dcu.ie. ..
Samuel Shulman said:
>Is it possible and how to rotate pictures in HTML document
Do you mean..
1) take an image and turn is clockwise/anitclockwise
2) each time the page loads select a different image in rotation?

D.
--
Fermat was right.

Feb 9 '07 #3
yes - you can do this-
Use the canvas tag. It is only supported I think in gecko based
browsers (Firefox and Safari, NOT IE). However Google has a free
little javascript library that will automatically convert any canvas
tags to use VRML in IE called excanvas. Very handy.

excanvas can be found at:
http://excanvas.sourceforge.net/

tutorial for the canvas tag:
http://developer.mozilla.org/en/docs/Canvas_tutorial

good luck!

Feb 9 '07 #4
Walton wrote:
excanvas can be found at:
http://excanvas.sourceforge.net/
Is this *definitely* from Google? It seems a little fishy to be
perfectly honest. Questions that come to mind include, why didn't Google
host it at http://code.google.com? Also, why is the logo on the top-left
of the page different to the usual Google Code logo?

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

Programming, n: A pastime similar to banging one's head
against a wall, but with fewer opportunities for reward.
Feb 9 '07 #5
Is this *definitely* from Google? It seems a little fishy to be
perfectly honest. Questions that come to mind include, why didn't Google
host it athttp://code.google.com?Also, why is the logo on the top-left
of the page different to the usual Google Code logo?
Yes, I'm fairly certain it's from Google. It's on sourceforge because
it's open source. Not sure why logos are different.

Nothing to be fishy about. The code actually works, just a bit slower
than canvas.

this page will show you how to checkout the latest code:
http://code.google.com/p/explorercanvas/source

that has the more familiar google code logo on it.

Feb 9 '07 #6
Walton wrote:
Yes, I'm fairly certain it's from Google. It's on sourceforge because
it's open source. Not sure why logos are different.
[...]

Ah okay, as long as you're sure ;) The other link you posted helps me to
make my mind up about it being "okay" though.

--
Dylan Parry
http://electricfreedom.org | http://webpageworkshop.co.uk

Programming, n: A pastime similar to banging one's head
against a wall, but with fewer opportunities for reward.
Feb 9 '07 #7
David Gillen wrote:
Samuel Shulman said:
>>I was refering to the second option
Or even better that the page will change the images using a timer

Please don't top post.
For changing what image is displayed each time a page is loaded you need to do
it server side, with php or asp or some such scripting language.
JS is client side and can't do this.
Yes, it can:

imgs=["a.gif","b.gif","c.gif"]
document.write("<IMG SRC= '"+imgs[new Date()%imgs.length]+"' >")

Mick
>
Although JS could be used to flick through images via a timer mechanism.
Look at set time out and then have it turn div's with the images on and off.

D.
Feb 9 '07 #8
In comp.lang.javascript message <0p*****************@newsfe2-win.ntli.ne
t>, Fri, 9 Feb 2007 14:18:36, Samuel Shulman
<sa************@ntlworld.composted:
>I was refering to the second option
Or even better that the page will change the images using a timer
>"David Gillen" <Be****@RedBrick.DCU.IEwrote in message
news:sl*******************@murphy.redbrick.dcu.ie ...
>2) each time the page loads select a different image in rotation?
Don't top-post. Don't over-quote. See FAQ.

Unless you have a near-infinite number of images available, I don't
think you can *change* the image at *every* load by using new Date().

For any one computer, ISTM that, using a cookie, you should be able at
each load to choose at random from the available images excluding that
last shown, thereby ensuring a *change*.

A page can easily change its own images at intervals while running; see
the graphics clocks in <URL:http://www.merlyn.demon.co.uk/js-anclk.htm>.

It's a good idea to read the newsgroup and its FAQ. See below.

--
(c) John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 6
news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.
Feb 10 '07 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by vandalo | last post: by
2 posts views Thread by csgraham74 | last post: by
9 posts views Thread by jd | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.