rotate images automatically when page loads

[handique]

Hi,
I have javascript code for rotating images, but the rotation starts only when mouse is placed over the image. But i want to rotate images automatically when the page loads. Can any guide me in this regard.

the javscript for rotating images is :

mg src="'+mImages[this.a3].src+'" onmouseover="th is.src=\''+mIma gesO[this.a3].src+'\'" onmouseout="thi s.src=\''+mImag es[this.a3].src+'\'" border=0 id="img'+this.a 3+'" style="cursor:p ointer

I want to replace onmouseover and onmouseout event by any other event which helps me in rotating images automatically when th page loads.

please help me in this regard. thank you in advance.

[gits]

it seems that your posted code is directly written to an image node. just write it into a javascript-function that retrieves the images you need and call that 'onload' of your page ...

kind regards

[handique]

Hi Gits,

thank for your response. Actually I am new in javascript. Can u please make changes in following js file, in order to make the images rotate automatically when page loads:

[CODE=javascript]
mImages=new Array();
mImagesO=new Array();
eye={p:0,
x:0,
y:0,
w:0,
h:0,
r:0,
v:0,
s:0,
isVertical:0,
a1:0,
a2:0,
a3:0,
color:'#ffffff' ,
colorover:'#fff fff',
backgroundcolor :'#0099ff',
backgroundcolor over:'#000000',
bordercolor:'#0 00000',
fontsize:12,
fontfamily:'Ari al',
pres:0,
pas:0,

spinmenu:functi on()
{
this.p=this.r/this.s;
this.a1=this.a2 =this.isVertica l?0:Math.PI/2;
},


spinmenuitem:fu nction(a7,a6,a5 ,aO)
{
bgc='';
bgcO='';

if(imgMenu==1)
{
mImages[this.a3]=new Image();
mImages[this.a3].src=a7;

if(aO)
{
mImagesO[this.a3]=new Image();
mImagesO[this.a3].src=aO;
}
if(!aO)
{
mImagesO[this.a3]=new Image();
mImagesO[this.a3].src=a7;
}
var www=mImages[this.a3].width;
a7b='<img src="'+mImages[this.a3].src+'" p="this.src=\'' +mImagesO[this.a3].src+'\'" onmouseout="thi s.src=\''+mImag es[this.a3].src+'\'" border=0 id="img'+this.a 3+'" style="cursor:p ointer">';
}
else
{ a7b=a7;
bgcO='this.styl e.color="'+this .colorover+'";t his.style.backg roundColor="'+t his.backgroundc olorover+'"';bg c='this.style.c olor="'+this.co lor+'";this.sty le.backgroundCo lor="'+this.bac kgroundcolor+'" ';
}


a4=" onclick='window .open(\""+a6+"\ ""+(a5?(",\""+a 5+"\""):",\"_se lf\"")+")'";
document.write( "<div id='spinmenu"+t his.a3+"' style='cursor:p ointer;cursor:e xpression(\"han d\");position:a bsolute;width:" +this.w+"px;lef t:"+this.h+"px; "+"backgrou nd-color:"+this.ba ckgroundcolor+" ;color:"+this.c olor+';border:' +this.border+'p x solid '+this.borderco lor+";font:norm al "+this.w+"p x "+this.fontfami ly+";text-align:center;cu rsor:default;z-Index:1000;' onmouseover='ey e.rotate("+this .a3+")' onmouseout='thi s.style.color=\ ""+this.color+" \";this.style.b ackgroundColor= \""+this.backgr oundcolor+"\"'" +a4+">"+a7b+"</div>");
document.close( );
this.a3++;
},

rotate:function (i)
{

eye.a2-=((i+eye.pres)* eye.pres);
eye.muta();

eye.pres=i;
},



muta:function()
{
a8=document.get ElementById("co ntroale");
for(i=0;i<this. a3;i++)
{
a9=document.get ElementById("sp inmenu"+i+"");
a9s=a9.style;
if(this.isVerti cal)
{
xi=parseInt(thi s.r*Math.cos(th is.a1+i*this.pa s))/this.s;
yi=parseInt(thi s.r*Math.sin(th is.a1+i*this.pa s));
a10=(this.p+xi)/(2*this.p);
if(imgMenu==1)a 11=this.w*(this .p+xi)/(2*this.p)+2;
else
a11=this.fontsi ze*(this.p+xi)/(2*this.p)+2;
a12=parseInt(10 0*(this.p+xi)/(2*this.p));
}
else
{
xi=parseInt(thi s.r*Math.cos(th is.a1+i*this.pa s));
yi=parseInt(thi s.r*Math.sin(th is.a1+i*this.pa s))/this.s;
a10=(this.p+yi)/(2*this.p);
if(imgMenu==1)
a11=this.w*(thi s.p+yi)/(2*this.p)+2;
else
a11=this.fontsi ze*(this.p+yi)/(2*this.p)+2;
a12=parseInt(10 0*(this.p+yi)/(2*this.p));
}


a13=(this.w-20)*a10+20;
a14=(this.h-20)*a10+10;
a9s.top=(yi+thi s.y-a14/2)+"px";
a9s.left=(xi+th is.x-a13/2)+"px";

if(imgMenu==1)
{
if(a11<=minW)
a11=minW;
if(a11>=this.w)
a11=this.w;
a9s.width=a11+" px";a9.firstChi ld.width=a11;
}

else
{
a9s.width=a13+" px";
a9s.fontSize=a1 1+"px";
}
a9s.zIndex=a12;
}


a8.style.top=th is.y+(this.isVe rtical?this.r:t his.p)+this.h/2+this.yB;
a8.style.left=t his.xB;

if(this.a1!=thi s.a2)
{
this.a1=(this.a 1>this.a2)?(thi s.a1-this.pas/this.v):(this.a 1+this.pas/this.v);
if(Math.abs(thi s.a1-this.a2)<this.p as/this.v)
this.a1=this.a2 ;
setTimeout("eye .muta()",10);
}
},




spinmenuclose:f unction()
{
this.pas=2*Math .PI/this.a3;
document.write( '<div id="controale" style="position :absolute"></div>');

document.close( );
eye.muta()
}
};



function getposOffset(wh at, offsettype)
{
var totaloffset=(of fsettype=="left ")? what.offsetLeft : what.offsetTop;
var parentEl=what.o ffsetParent;
while (parentEl!=null )
{
totaloffset=(of fsettype=="left ")? totaloffset+par entEl.offsetLef t :totaloffset+pa rentEl.offsetTo p;
parentEl=parent El.offsetParent ;
}
return totaloffset;
}[/CODE]

I will waiting for your response. Thank you in advance.

Regards,
Handique.

[gits]

your first post shows a very different way to 'rotate' ... by just replacing the images on mouseover ... why do you use another script now? this does some more complex things and i don't really like to read that bunch of code to understand it just for such a simple thing that the image-replace would be. do you just need replaced images or do you even need all of the things in your last shown script - that even does something with text, fontsize etc. ... should the images keep rotating? ... just describe your requirement first and give an example html for it so we could work that out together ... that will help you to understand how things would work instead of just copy&paste scripts ...

kind regards

[handique]

Here is the html code for the above javascript. I only need to rotate the images.

<html>
<head>
<script language="JavaScript" type="text/javascript" src="rotate.js"></script>
</head>
<script language="JavaScript" type="text/javascript">
eye.isHorizental = 1; 
eye.xB = 70;  
eye.yB = 20; 
eye.buttDist=5;
eye.x = 400; 
eye.y = 230; 
eye.w = 200; 
eye.h = 120;
eye.r = 260; 
eye.v = 100; 
eye.s = 30.0; 
eye.color = '#000000'; 
eye.colorover = '000000'; 
eye.backgroundcolor = '#000000'; 
eye.backgroundcolorover = '#000000'; 
eye.bordercolor = '#000000'; 
eye.border = 1; 
eye.fontsize = '25'; 
eye.fontfamily = 'Comic Sans MS'; 

if (document.getElementById&&document.createElement){

document.write('<div id="spinanchor" style="height:'+(eye.h+20)+'px;"><'+'/div>')
eye.anchor=document.getElementById('spinanchor')
eye.spinmenu();
eye.x+=getposOffset(eye.anchor, "left") 
eye.y+=getposOffset(eye.anchor, "top")
eye.spinmenuitem("1.jpg","http://www.google.com", target="_onder");
eye.spinmenuitem("2.jpg","http://www.google.com", target="_onder");
eye.spinmenuitem("3.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("4.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("5.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("6.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("7.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("8.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("9.JPG","http://www.google.com", target="_onder");

eye.spinmenuclose();
}
else{
document.write('This is only a test page for a certain script. Your browser is too outdated to display what the script is about.');
}
</script>
<body >
<div style="position:absolute;left:300px">

</body>
</html>

I hope this helps. Please let me know if you need any further information. Thank you in advance.

regards,
handique

[marcolee]

rotate

Can you post the rotate.js or send me the rotate.js?

<html>
<head>
<script language="JavaScript" type="text/javascript" src="rotate.js"></script>
</head>
<script language="JavaScript" type="text/javascript">
eye.isHorizental = 1; 
eye.xB = 70; 
eye.yB = 20; 
eye.buttDist=5;
eye.x = 400; 
eye.y = 230; 
eye.w = 200; 
eye.h = 120;
eye.r = 260; 
eye.v = 100; 
eye.s = 30.0; 
eye.color = '#000000'; 
eye.colorover = '000000'; 
eye.backgroundcolor = '#000000'; 
eye.backgroundcolorover = '#000000'; 
eye.bordercolor = '#000000'; 
eye.border = 1; 
eye.fontsize = '25'; 
eye.fontfamily = 'Comic Sans MS'; 

if (document.getElementById&&document.createElement){

document.write('<div id="spinanchor" style="height:'+(eye.h+20)+'px;"><'+'/div>')
eye.anchor=document.getElementById('spinanchor')
eye.spinmenu();
eye.x+=getposOffset(eye.anchor, "left") 
eye.y+=getposOffset(eye.anchor, "top")
eye.spinmenuitem("1.jpg","http://www.google.com", target="_onder");
eye.spinmenuitem("2.jpg","http://www.google.com", target="_onder");
eye.spinmenuitem("3.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("4.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("5.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("6.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("7.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("8.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("9.JPG","http://www.google.com", target="_onder");

eye.spinmenuclose();
}
else{
document.write('This is only a test page for a certain script. Your browser is too outdated to display what the script is about.');
}
</script>
<body >
<div style="position:absolute;left:300px">

</body>
</html>

[acoder]

Do you want to achieve the same thing as what the OP wanted? What is this "eye" object in your code?

[marcolee]

I you want to achieve this "eye" object code?
The rotate.js code use in the eye obj.
<script language="JavaS cript" type="text/javascript" src="rotate.js" ></script>

[acoder]

You'd have to post that code. What is the code supposed to do? What is it doing instead?

[marcolee]

It doesn't work. After running this program, I can see any pictures in my website (1.jpg, 2.jpg, 3.jpg).

<script type="text/javascript">
eye={p:0,x:0,y:0,w:0,h:0,r:0,v:0,s:0,isVertical:0,a1:0,a2:0,a3:0,color:'#ffffff',colorover:'#ffffff',backgroundcolor:'#0099ff',backgroundcolorover:'#000000',bordercolor:'#000000',fontsize:12,fontfamily:'Arial',pas:0,spinmenu:function(){this.p=this.r/this.s;this.a1=this.a2=this.isVertical?0:Math.PI/2},spinmenuitem:function(a7,a6,a5){a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";document.write("<div id='spinmenu"+this.a3+"' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+	"onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>");this.a3++},muta:function(){a8=document.getElementById("controale");for(i=0;i<this.a3;i++){a9=document.getElementById("spinmenu"+i+"");a9s=a9.style;if(this.isVertical){xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));a10=(this.p+xi)/(2*this.p);a11=this.fontsize*(this.p+xi)/(2*this.p)+2;a12=parseInt(100*(this.p+xi)/(2*this.p))}else{xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;a10=(this.p+yi)/(2*this.p);a11=this.fontsize*(this.p+yi)/(2*this.p)+2;a12=parseInt(100*(this.p+yi)/(2*this.p))};a13=(this.w-20)*a10+20;a14=(this.h-20)*a10+10;a9s.top=(yi+this.y-a14/2)+"px";a9s.left=(xi+this.x-a13/2)+"px";a9s.width=a13+"px";a9s.fontSize=a11+"px";a9s.zIndex=a12};a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;a8.style.left=this.x-a8.offsetWidth/2;if(this.a1!=this.a2){this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v):(this.a1+this.pas/this.v);if(Math.abs(this.a1-this.a2)<this.pas/this.v)
this.a1=this.a2;setTimeout("eye.muta()",10)}},spinmenuclose:function(){this.pas=2*Math.PI/this.a3;document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()"><<</button> <button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()">>></button></div>');eye.muta()}};

function getposOffset(what, offsettype)
{
	var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
	var parentEl=what.offsetParent;

	while (parentEl!=null)
	{
		totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;
		parentEl=parentEl.offsetParent;
	}
return totaloffset;
}

eye.isHorizental = 1; 
eye.xB = 70; 
eye.yB = 20; 
eye.buttDist=5;
eye.x = 400; 
eye.y = 230; 
eye.w = 200; 
eye.h = 120;
eye.r = 260; 
eye.v = 100; 
eye.s = 30.0; 
eye.color = '#000000'; 
eye.colorover = '000000'; 
eye.backgroundcolor = '#000000'; 
eye.backgroundcolorover = '#000000'; 
eye.bordercolor = '#000000'; 
eye.border = 1; 
eye.fontsize = '25'; 
eye.fontfamily = 'Comic Sans MS'; 


if (document.getElementById&&document.createElement){

document.write('<div id="spinanchor" style="height:'+(eye.h+20)+'px;"><'+'/div>')
eye.anchor=document.getElementById('spinanchor')
eye.spinmenu();
eye.x+=getposOffset(eye.anchor, "left") 
eye.y+=getposOffset(eye.anchor, "top")
eye.spinmenuitem("1.jpg","http://www.google.com", target="_onder");
eye.spinmenuitem("2.jpg","http://www.google.com", target="_onder");
eye.spinmenuitem("3.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("4.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("5.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("6.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("7.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("8.JPG","http://www.google.com", target="_onder");
eye.spinmenuitem("9.JPG","http://www.google.com", target="_onder");

eye.spinmenuclose();
}
else{
document.write('This is only a test page for a certain script. Your browser is too outdated to display what the script is about.');
}
</script>

[acoder]

Have you got the documentation for this script? Do you have a link?

[marcolee]

http://bytes.com/topic/javascript/answers/853997-rotate-images-automatically-when-page-loads#post3500432

After running this program in editplus, I can't see any pictures in my website (1.jpg, 2.jpg, 3.jpg). The code is come from the same link of my post paper.

[acoder]

The reason you can't see the pictures is that you're passing the source path for the image, but the script doesn't convert that into an image, so either:
1. change the script to create an image element; or
2. pass the <img> element to spinmenuitem:

eye.spinmenuitem("<img src='1.jpg'>","http://www.google.com", target="_onder");

[marcolee]

Can you fix it and post the correct one?
Thank you!

[acoder]

I've already posted a simple solution (no.2): replace 1.jpg with <img src='1.jpg'> and likewise for 2.jpg, 3.jpg, etc.