Member Avatar for Shanti C

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...

  • 4 Contributors
  • 7 Replies
  • 107 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Shanti C

Recommended Answers

All 7 Replies

Member Avatar for R0bb0b

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.

Member Avatar for Troy III

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

Member Avatar for Shanti C

thank you for you both....

Member Avatar for Shanti C

please help me with any other ideas...

Member Avatar for praveen_dusari

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

<!-- 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
Member Avatar for Shanti C

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...

Member Avatar for Shanti C

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

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

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.