...

View Full Version : clockwise or counterclockwise image rotation



schmirk
08-03-2002, 03:46 AM
I am making a web page where the main focus will be an abstract image that users will have the power to spin or rotate on screen. The object is to change the angle of the image to allow people to see shapes and symbols within the abstractism. Think of the page as techno inkblot testing. Users will push a left or right button, scroll a bar or type in an angle and the image will react, adjusting its angle as directed. Is there anything written that does this? If not, where, with my basic JavaScripting skills should I start?

Muchly appreciative of any advice,
tanx in advance!

Brandon

joh6nn
08-03-2002, 04:08 AM
javascript can't do that. you could do that with a java applet, or with flash, but not with javascript.

jkd
08-03-2002, 04:38 AM
IE has a proprietary filter: CSS property, and among the various transform you can apply through it, rotation is one of them.

http://www.webfx.eae.net uses it on their frontpage.

The only standards-compliant way to do this though would be to insert whatever content you have into an SVG <foreignObject> tag and apply a rotation transformation to it, though non-SVG-enabled-Mozilla browsers would require a plugin to view it.

schmirk
08-03-2002, 07:07 PM
Thanks, to code something like that sounds out of my league. It would be nice to have it rotate smooth but I might be able to compromise with a slide show and finite amount of viewing angles. To start with at least, the point will be to launch this site, not drown in a script. Also maybe flash with action scripting would be a good way to go. I didn't see the example on the WebFX front page.

duniyadnd
08-13-2002, 07:53 PM
Saw this nifty trick at this site:

kitbag.com (http://www.kitbag.com)

where some nike shoe products, you could view from different angles based on where the mouse was located. Turned out they used imagemaps, and if the mouse was over a particular vicinity, the image would change to that angle, you might want to try that, doesn't look too bad.

Here's a direct link to that example:

http://www.kitbag.com/stores/kitbag_4_0/brands/nike/product_details.asp?pid=5376&bid=9&mid=26

Hope it helped.

Duniyadnd

hypedup.co.uk
08-13-2002, 08:29 PM
jkd, whats the css proprietry filter code i could just to rotate an image? ive looked all over msdn but cant find it!

thanks, paul

beetle
08-13-2002, 08:44 PM
http://msdn.microsoft.com/workshop/author/filter/reference/filters/matrix.asp

RoyW
08-14-2002, 03:49 AM
schmirk said


.....I might be able to compromise with a slide show and finite amount of viewing angles.


If you have a graphics program that can rotate the image and create a finite number of images you can use an animated rollover script.

Demo's
http://www.javascript-fx.com/interfaces/globe/demo.html
http://www.javascript-fx.com/experiments/ani_rollovers/index.html
http://www.javascript-fx.com/experiments/ani_rollovers/demo1.html
http://www.javascript-fx.com/experiments/ani_rollovers/demo2.html
http://www.javascript-fx.com/experiments/ani_rollovers/demo6.html

hypedup.co.uk
08-17-2002, 01:38 PM
beetle, thats exactly what i wanted, thanks. the only problem is it rotates the image from the left hand side. is there any way to get it to rotate from the centre? it looks silly with how it is at the moment! :(

here is the code i have so far (if you hold down P, it will rotate the picture):

<script>
document.onkeydown = keyDown
this.angle = 0

function keyDown() {
if (window.event.keyCode==80) {
SetRotation() } }

deg2rad = Math.PI * 2 / 360;

function SetRotation() {
this.angle += 10;
rad = this.angle * deg2rad;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
mydiv.filters.item(0).M11 = costheta;
mydiv.filters.item(0).M12 = -sintheta;
mydiv.filters.item(0).M21 = sintheta;
mydiv.filters.item(0).M22 = costheta; }
</script>

<div id="mydiv" style="width:25px; height:25px; filter:progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"><img src="picture.gif" width="25" height="25"></div>

beetle
08-17-2002, 02:11 PM
Sorry, I don't know. Perhaps somebody who is more of a mathmetician than I can offer a solution.

schmirk
08-22-2002, 10:31 PM
yes, these types of link will work but I have one issue that clubs them all, even the slide show. My images, in order to be properly enjoyed have to weigh in at around 100 kb. How many copies does it take to animate? Not feasible. Even at only 8 different angles, those with low bandwidth will simply not be able to enjoy the page. However, to load one copy of this image and turn it like a steering wheel, left and right, is feasible. This spells applet or flash.

beetle
08-22-2002, 10:46 PM
100kb? Goodness, that's big. What is it? What are the dimensions? Got a link? I'm sure it can be smaller...

schmirk
08-24-2002, 01:28 AM
I havent posted any of the images yet, just feeling out where I am heading while I finish off some other work. The point will be to display photography in a high enough resolution that it can be enjoyed almost full screen or larger. The details in this display are important.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum