rotate images automatically when page loads | Newbie | | Join Date: Nov 2008
Posts: 3
| | |
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="this.src=\''+mImagesO[this.a3].src+'\'" onmouseout="this.src=\''+mImages[this.a3].src+'\'" border=0 id="img'+this.a3+'" style="cursor:pointer
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.
|  | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,134
| | | re: rotate images automatically when page loads
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
| | Newbie | | Join Date: Nov 2008
Posts: 3
| | | re: rotate images automatically when page loads
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: -
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:'#ffffff',
-
backgroundcolor:'#0099ff',
-
backgroundcolorover:'#000000',
-
bordercolor:'#000000',
-
fontsize:12,
-
fontfamily:'Arial',
-
pres:0,
-
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,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="this.src=\''+mImages[this.a3].src+'\'" border=0 id="img'+this.a3+'" style="cursor:pointer">';
-
}
-
else
-
{ a7b=a7;
-
bgcO='this.style.color="'+this.colorover+'";this.style.backgroundColor="'+this.backgroundcolorover+'"';bgc='this.style.color="'+this.color+'";this.style.backgroundColor="'+this.backgroundcolor+'"';
-
}
-
-
-
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:'+this.border+'px solid '+this.bordercolor+";font:normal "+this.w+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='eye.rotate("+this.a3+")' onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+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.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);
-
if(imgMenu==1)a11=this.w*(this.p+xi)/(2*this.p)+2;
-
else
-
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);
-
if(imgMenu==1)
-
a11=this.w*(this.p+yi)/(2*this.p)+2;
-
else
-
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";
-
-
if(imgMenu==1)
-
{
-
if(a11<=minW)
-
a11=minW;
-
if(a11>=this.w)
-
a11=this.w;
-
a9s.width=a11+"px";a9.firstChild.width=a11;
-
}
-
-
else
-
{
-
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+this.yB;
-
a8.style.left=this.xB;
-
-
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"></div>');
-
-
document.close();
-
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;
-
}
I will waiting for your response. Thank you in advance.
Regards,
Handique.
|  | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,134
| | | re: rotate images automatically when page loads
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
| | Newbie | | Join Date: Nov 2008
Posts: 3
| | | re: rotate images automatically when page loads
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
| | Newbie | | Join Date: Jul 2009
Posts: 7
| | | re: rotate images automatically when page loads
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>
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: rotate images automatically when page loads
Do you want to achieve the same thing as what the OP wanted? What is this "eye" object in your code?
| | Newbie | | Join Date: Jul 2009
Posts: 7
| | | re: rotate images automatically when page loads
I you want to achieve this "eye" object code?
The rotate.js code use in the eye obj.
<script language="JavaScript" type="text/javascript" src="rotate.js"></script>
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: rotate images automatically when page loads
You'd have to post that code. What is the code supposed to do? What is it doing instead?
| | Newbie | | Join Date: Jul 2009
Posts: 7
| | | re: rotate images automatically when page loads
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>
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: rotate images automatically when page loads
Have you got the documentation for this script? Do you have a link?
| | Newbie | | Join Date: Jul 2009
Posts: 7
| | | re: rotate images automatically when page loads rotate images automatically when page loads
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.
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: rotate images automatically when page loads
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");
| | Newbie | | Join Date: Jul 2009
Posts: 7
| | | re: rotate images automatically when page loads
Can you fix it and post the correct one?
Thank you!
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: rotate images automatically when page loads
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.
| | Newbie | | Join Date: Jul 2009
Posts: 7
| | | re: rotate images automatically when page loads
I want it to rotate automatically. What do I need to change?
When the mouse is over of the picture, the pictures stop rotating.
When the mouse is out of the picture, the pictures continue rotating.
And the coding is too long. Can I take out some of coding?
Thank you!
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,581
| | | re: rotate images automatically when page loads
One thing at a time. Quote:
Originally Posted by marcolee I want it to rotate automatically. What do I need to change? Can you see the code for the buttons: - <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>
To make it automatically rotate, add one of the onclick (whichever way you want it to rotate) onload.
| | Newbie | | Join Date: Jul 2009
Posts: 7
| | | re: rotate images automatically when page loads
How can I find which image is at the middle?
1.jpg, 2.jpg, or......
when the page loads, 1.jpg is at the middle.
So how can I keep tracking which image is at the middle?
|  | Similar JavaScript / Ajax / DHTML bytes | | | /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,418 network members.
|