image rotation????

Question

Shanti C 106 Posting Virtuoso

16 Years Ago

Hello all...

please help me to solve this thread very urgently???

How to rotate an image by 360 degrees in javascript or any other technology???
What requirements need to complete this task???
see this link for refernce:
http://www.i-spy360.com/en/ispyspin/
Thanks...

javascript

4 Contributors
7 Replies
107 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by Shanti C

R0bb0b 344 Posting Shark

16 Years Ago

first, get the "Web Developer" add on for firefox,
then go to http://www.i-spy360.com/spins/spin6/Spin360.html
and use the "Web Developer" option called "View Javascript" under the information tab. Then you can see how they do it.

ignore the google analytics portion

it actually looks relatively simple.

Troy III 272 Posting Pro

16 Years Ago

They're using area maps and image holder for at least 36-50 pictures depending on example viewed.
The mouseover event on area to bring up the corresponding image frame. But the animation uses some script obviously.

I believe there must be some other way to compensate for this great number of areas defined.

But this method must be no - script compatible and should work with javascript disabled browsers too.

[sorry it doesn't!]

But I'm 198% positive it can be made to work without JavaScript also.

regards

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Shanti C 106 Posting Virtuoso · Answer 1 · 2008-07-22T10:40:41+00:00

Shanti C 106 Posting Virtuoso

16 Years Ago

thank you for you both....

Shanti C 106 Posting Virtuoso · Answer 2 · 2008-07-22T15:12:03+00:00

Shanti C 106 Posting Virtuoso

16 Years Ago

please help me with any other ideas...

praveen_dusari 11 Posting Whiz in Training · Answer 3 · 2008-07-22T16:56:04+00:00

praveen_dusari 11 Posting Whiz in Training

16 Years Ago

hi shanti,
i`ll post the javascript they used hope this might help u

flowersb1_javascript.js (14.68 KB)

The attachment preview is chopped off after the first 10 KB. Please download the entire file.

<!-- HIDE FROM OTHER BROWSERS

// ################################################################################

// #  Copyright 2000 Autolycus Corp.  All Rights Reserved  Patents Pending       #

// # JavaScript Object VR Rollover Method              Version 1.4                #

// # info@autolycus.com                                Created 11/3/1999          #

// # http://www.autolycus.com                          Last Modified 11/7/2002    #

// #                                                                              #

// # This code is protected by US and international law including copyright.      #

// # Any illegal copying, modificaton or theft is prohibited and is punishable    #

// # by law. For further information, please contact Autolycus Corporation at     #

// # info@autolycus.com or 717.761.9080.                                          #

// ################################################################################



// Declare variables

var flowersb1_preloadFlag = false;                   // Variable that is used only to make sure all the images for the animation are preloaded

var flowersb1_shot_number = 1;                     // First image in the animation

var flowersb1_total_frames = 40;                   // Total number of images in animation

var flowersb1_spinning = "YES";                      // Whether or not the image is to spin when the page loads

var flowersb1_spin_direction = "RIGHT";              // What direction the image is to spin when the page loads

var flowersb1_spin_speed = "150";                    // The speed at which the animation is to run. Lower numbers equal faster playback

var flowersb1_spin_object = "flowersb1_STech";        // The object or image space that will be used for the animation playback



//Preload Images

if (document.images) {

	flowersb1 = new Array(40);

	flowersb1[1] = new Image;

	flowersb1[1].src = "flowersb1_frame01.jpg";

	flowersb1[2] = new Image;

	flowersb1[2].src = "flowersb1_frame02.jpg";

	flowersb1[3] = new Image;

	flowersb1[3].src = "flowersb1_frame03.jpg";

	flowersb1[4] = new Image;

	flowersb1[4].src = "flowersb1_frame04.jpg";

	flowersb1[5] = new Image;

	flowersb1[5].src = "flowersb1_frame05.jpg";

	flowersb1[6] = new Image;

	flowersb1[6].src = "flowersb1_frame06.jpg";

	flowersb1[7] = new Image;

	flowersb1[7].src = "flowersb1_frame07.jpg";

	flowersb1[8] = new Image;

	flowersb1[8].src = "flowersb1_frame08.jpg";

	flowersb1[9] = new Image;

	flowersb1[9].src = "flowersb1_frame09.jpg";

	flowersb1[10] = new Image;

	flowersb1[10].src = "flowersb1_frame10.jpg";

	flowersb1[11] = new Image;

	flowersb1[11].src = "flowersb1_frame11.jpg";

	flowersb1[12] = new Image;

	flowersb1[12].src = "flowersb1_frame12.jpg";

	flowersb1[13] = new Image;

	flowersb1[13].src = "flowersb1_frame13.jpg";

	flowersb1[14] = new Image;

	flowersb1[14].src = "flowersb1_frame14.jpg";

	flowersb1[15] = new Image;

	flowersb1[15].src = "flowersb1_frame15.jpg";

	flowersb1[16] = new Image;

	flowersb1[16].src = "flowersb1_frame16.jpg";

	flowersb1[17] = new Image;

	flowersb1[17].src = "flowersb1_frame17.jpg";

	flowersb1[18] = new Image;

	flowersb1[18].src = "flowersb1_frame18.jpg";

	flowersb1[19] = new Image;

	flowersb1[19].src = "flowersb1_frame19.jpg";

	flowersb1[20] = new Image;

	flowersb1[20].src = "flowersb1_frame20.jpg";

	flowersb1[21] = new Image;

	flowersb1[21].src = "flowersb1_frame21.jpg";

	flowersb1[22] = new Image;

	flowersb1[22].src = "flowersb1_frame22.jpg";

	flowersb1[23] = new Image;

	flowersb1[23].src = "flowersb1_frame23.jpg";

	flowersb1[24] = new Image;

	flowersb1[24].src = "flowersb1_frame24.jpg";

	flowersb1[25] = new Image;

	flowersb1[25].src = "flowersb1_frame25.jpg";

	flowersb1[26] = new Image;

	flowersb1[26].src = "flowersb1_frame26.jpg";

	flowersb1[27] = new Image;

	flowersb1[27].src = "flowersb1_frame27.jpg";

	flowersb1[28] = new Image;


	flowersb1[28].src = "flowersb1_frame28.jpg";

	flowersb1[29] = new Image;

	flowersb1[29].src = "flowersb1_frame29.jpg";

	flowersb1[30] = new Image;

	flowersb1[30].src = "flowersb1_frame30.jpg";

	flowersb1[31] = new Image;

	flowersb1[31].src = "flowersb1_frame31.jpg";

	flowersb1[32] = new Image;

	flowersb1[32].src = "flowersb1_frame32.jpg";

	flowersb1[33] = new Image;

	flowersb1[33].src = "flowersb1_frame33.jpg";

	flowersb1[34] = new Image;

	flowersb1[34].src = "flowersb1_frame34.jpg";

	flowersb1[35] = new Image;

	flowersb1[35].src = "flowersb1_frame35.jpg";

	flowersb1[36] = new Image;

	flowersb1[36].src = "flowersb1_frame36.jpg";

	flowersb1[37] = new Image;

	flowersb1[37].src = "flowersb1_frame37.jpg";

	flowersb1[38] = new Image;

	flowersb1[38].src = "flowersb1_frame38.jpg";

	flowersb1[39] = new Image;

	flowersb1[39].src = "flowersb1_frame39.jpg";

	flowersb1[40] = new Image;

	flowersb1[40].src = "flowersb1_frame40.jpg";

	flowersb1_preloadFlag = true;

}



// Function that handles the rollovers when you mouse over a button

function flowersb1_Rollover(flowersb1_imgDocID,flowersb1_imgNumber) {

	flowersb1_shot_number = flowersb1_imgNumber;

	flowersb1_spinning = "NO";

	document.images[flowersb1_imgDocID].src = flowersb1[flowersb1_shot_number].src;

}



// Function that handles the Auto-Spin

function flowersb1_Auto_Spin(flowersb1_imgDocID,flowersb1_imgObjName) {

	if (flowersb1_spinning == "YES") {

		if (flowersb1_spin_direction == "RIGHT") {

			document.images[flowersb1_imgDocID].src = flowersb1[flowersb1_shot_number].src;

			if (flowersb1_shot_number == flowersb1_total_frames) {

				flowersb1_shot_number = 1;

			} else {

				flowersb1_shot_number = flowersb1_shot_number + 1;

			}

			setTimeout("flowersb1_Auto_Spin(flowersb1_spin_object,'flowersb1_frame');",flowersb1_spin_speed);

		} else {

			document.images[flowersb1_imgDocID].src = flowersb1[flowersb1_shot_number].src;

			if (flowersb1_shot_number == 1) {

				flowersb1_shot_number = flowersb1_total_frames;

			} else {

				flowersb1_shot_number = flowersb1_shot_number - 1;

			}

			setTimeout("flowersb1_Auto_Spin(flowersb1_spin_object,'flowersb1_frame');",flowersb1_spin_speed);

		}

	}

}



document.write('');

document.write('<MAP NAME="flowersb1_VR">');

document.write('<AREA SHAPE="rect" COORDS="0,0,7,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',1); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="8,0,15,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',2); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="16,0,23,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',3); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="24,0,31,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',4); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="32,0,39,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',5); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="40,0,47,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',6); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="48,0,55,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',7); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="56,0,63,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',8); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="64,0,71,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',9); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="72,0,79,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',10); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="80,0,87,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',11); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="88,0,95,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',12); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="96,0,103,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',13); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="104,0,111,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',14); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="112,0,119,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',15); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="120,0,127,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',16); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="128,0,135,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',17); window.status=\'\'; return true;" ONFOCUS="flowersb1_STech.blur(); return true;">');

document.write('<AREA SHAPE="rect" COORDS="136,0,143,240" HREF="#" ONMOUSEOVER="flowersb1_Rollover(\'flowersb1_STech\',18); window.status=\'\'; return true;" ON

Shanti C 106 Posting Virtuoso · Answer 4 · 2008-07-22T16:58:07+00:00

first, get the "Web Developer" add on for firefox,
then go to http://www.i-spy360.com/spins/spin6/Spin360.html
and use the "Web Developer" option called "View Javascript" under the information tab. Then you can see how they do it.
ignore the google analytics portion
it actually looks relatively simple.

thank you robb for your idea...

Shanti C 106 Posting Virtuoso · Answer 5 · 2008-07-22T17:00:23+00:00

hi shanti,
i`ll post the javascript they used hope this might help u

thank you praveen...
I got solution by your attachment...
thanks.....