Connecting Tech Pros Worldwide Forums | Help | Site Map

rotate images automatically when page loads

Newbie
 
Join Date: Nov 2008
Posts: 3
#1: Nov 14 '08
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.



gits's Avatar
Moderator
 
Join Date: May 2007
Location: Munich, Germany
Posts: 4,134
#2: Nov 14 '08

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
#3: Nov 17 '08

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:

Expand|Select|Wrap|Line Numbers
  1.    mImages=new Array();
  2.    mImagesO=new Array();
  3.    eye={p:0,
  4.         x:0,
  5.         y:0,
  6.         w:0,
  7.         h:0,
  8.         r:0,
  9.         v:0,
  10.         s:0,
  11.         isVertical:0,
  12.         a1:0,
  13.         a2:0,
  14.         a3:0,
  15.         color:'#ffffff',
  16.         colorover:'#ffffff',
  17.         backgroundcolor:'#0099ff',
  18.         backgroundcolorover:'#000000',
  19.         bordercolor:'#000000',
  20.         fontsize:12,
  21.         fontfamily:'Arial',
  22.         pres:0,
  23.         pas:0,
  24.  
  25.         spinmenu:function()
  26.          {
  27.             this.p=this.r/this.s;
  28.             this.a1=this.a2=this.isVertical?0:Math.PI/2;
  29.           },
  30.  
  31.  
  32.        spinmenuitem:function(a7,a6,a5,aO)
  33.          {
  34.            bgc='';
  35.            bgcO='';
  36.  
  37.            if(imgMenu==1)
  38.             {
  39.              mImages[this.a3]=new Image();
  40.              mImages[this.a3].src=a7;
  41.  
  42.              if(aO)
  43.              {
  44.                mImagesO[this.a3]=new Image();
  45.                mImagesO[this.a3].src=aO;
  46.              }
  47.              if(!aO)
  48.              {
  49.              mImagesO[this.a3]=new Image();
  50.              mImagesO[this.a3].src=a7;
  51.              }
  52.              var www=mImages[this.a3].width;
  53.              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">';
  54.             }
  55.            else
  56.             { a7b=a7;
  57.               bgcO='this.style.color="'+this.colorover+'";this.style.backgroundColor="'+this.backgroundcolorover+'"';bgc='this.style.color="'+this.color+'";this.style.backgroundColor="'+this.backgroundcolor+'"';
  58.             }
  59.  
  60.  
  61.             a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";
  62.             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>");
  63.             document.close();
  64.             this.a3++;
  65.          },
  66.  
  67.      rotate:function(i)
  68.      {
  69.  
  70.             eye.a2-=((i+eye.pres)*eye.pres);
  71.             eye.muta();
  72.  
  73.         eye.pres=i;
  74.      },
  75.  
  76.  
  77.  
  78.           muta:function()
  79.           {
  80.             a8=document.getElementById("controale");
  81.             for(i=0;i<this.a3;i++)
  82.                {
  83.                  a9=document.getElementById("spinmenu"+i+"");
  84.                  a9s=a9.style;
  85.                  if(this.isVertical)
  86.                    {
  87.                      xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;
  88.                      yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));
  89.                      a10=(this.p+xi)/(2*this.p); 
  90.                      if(imgMenu==1)a11=this.w*(this.p+xi)/(2*this.p)+2;
  91.                      else
  92.                      a11=this.fontsize*(this.p+xi)/(2*this.p)+2;
  93.                      a12=parseInt(100*(this.p+xi)/(2*this.p));
  94.                     }
  95.                  else
  96.                     {
  97.                       xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));
  98.                       yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;
  99.                       a10=(this.p+yi)/(2*this.p);
  100.                       if(imgMenu==1)
  101.                          a11=this.w*(this.p+yi)/(2*this.p)+2;
  102.                       else
  103.                           a11=this.fontsize*(this.p+yi)/(2*this.p)+2;
  104.                          a12=parseInt(100*(this.p+yi)/(2*this.p));
  105.                     }
  106.  
  107.  
  108.                      a13=(this.w-20)*a10+20;
  109.                      a14=(this.h-20)*a10+10;
  110.                      a9s.top=(yi+this.y-a14/2)+"px";
  111.                      a9s.left=(xi+this.x-a13/2)+"px";
  112.  
  113.                      if(imgMenu==1)
  114.                        {
  115.                          if(a11<=minW)
  116.                           a11=minW;
  117.                          if(a11>=this.w)
  118.                            a11=this.w;
  119.                          a9s.width=a11+"px";a9.firstChild.width=a11;
  120.                         }
  121.  
  122.                       else
  123.                         {
  124.                           a9s.width=a13+"px";
  125.                           a9s.fontSize=a11+"px";
  126.                         }
  127.                     a9s.zIndex=a12;
  128.                 }
  129.  
  130.  
  131.              a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+this.yB;
  132.              a8.style.left=this.xB;
  133.  
  134.              if(this.a1!=this.a2)
  135.                 {
  136.                  this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v):(this.a1+this.pas/this.v);
  137.                     if(Math.abs(this.a1-this.a2)<this.pas/this.v)
  138.                    this.a1=this.a2;
  139.                    setTimeout("eye.muta()",10);
  140.                 }
  141.           },
  142.  
  143.  
  144.  
  145.  
  146.           spinmenuclose:function()
  147.              {
  148.                 this.pas=2*Math.PI/this.a3;
  149.                 document.write('<div id="controale" style="position:absolute"></div>');
  150.  
  151.                 document.close();
  152.                 eye.muta()
  153.              }
  154.         };
  155.  
  156.  
  157.  
  158.    function getposOffset(what, offsettype)
  159.    {
  160.      var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
  161.      var parentEl=what.offsetParent;
  162.      while (parentEl!=null)
  163.      {
  164.        totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;
  165.        parentEl=parentEl.offsetParent;
  166.      }
  167.      return totaloffset;
  168.     }
I will waiting for your response. Thank you in advance.

Regards,
Handique.
gits's Avatar
Moderator
 
Join Date: May 2007
Location: Munich, Germany
Posts: 4,134
#4: Nov 18 '08

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
#5: Nov 18 '08

re: rotate images automatically when page loads


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

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script language="JavaScript" type="text/javascript" src="rotate.js"></script>
  4. </head>
  5. <script language="JavaScript" type="text/javascript">
  6. eye.isHorizental = 1; 
  7. eye.xB = 70;  
  8. eye.yB = 20; 
  9. eye.buttDist=5;
  10. eye.x = 400; 
  11. eye.y = 230; 
  12. eye.w = 200; 
  13. eye.h = 120;
  14. eye.r = 260; 
  15. eye.v = 100; 
  16. eye.s = 30.0; 
  17. eye.color = '#000000'; 
  18. eye.colorover = '000000'; 
  19. eye.backgroundcolor = '#000000'; 
  20. eye.backgroundcolorover = '#000000'; 
  21. eye.bordercolor = '#000000'; 
  22. eye.border = 1; 
  23. eye.fontsize = '25'; 
  24. eye.fontfamily = 'Comic Sans MS'; 
  25.  
  26. if (document.getElementById&&document.createElement){
  27.  
  28. document.write('<div id="spinanchor" style="height:'+(eye.h+20)+'px;"><'+'/div>')
  29. eye.anchor=document.getElementById('spinanchor')
  30. eye.spinmenu();
  31. eye.x+=getposOffset(eye.anchor, "left") 
  32. eye.y+=getposOffset(eye.anchor, "top")
  33. eye.spinmenuitem("1.jpg","http://www.google.com", target="_onder");
  34. eye.spinmenuitem("2.jpg","http://www.google.com", target="_onder");
  35. eye.spinmenuitem("3.JPG","http://www.google.com", target="_onder");
  36. eye.spinmenuitem("4.JPG","http://www.google.com", target="_onder");
  37. eye.spinmenuitem("5.JPG","http://www.google.com", target="_onder");
  38. eye.spinmenuitem("6.JPG","http://www.google.com", target="_onder");
  39. eye.spinmenuitem("7.JPG","http://www.google.com", target="_onder");
  40. eye.spinmenuitem("8.JPG","http://www.google.com", target="_onder");
  41. eye.spinmenuitem("9.JPG","http://www.google.com", target="_onder");
  42.  
  43. eye.spinmenuclose();
  44. }
  45. else{
  46. document.write('This is only a test page for a certain script. Your browser is too outdated to display what the script is about.');
  47. }
  48. </script>
  49. <body >
  50. <div style="position:absolute;left:300px">
  51.  
  52. </body>
  53. </html>
  54.  
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
#6: Jul 19 '09

re: rotate images automatically when page loads


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

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script language="JavaScript" type="text/javascript" src="rotate.js"></script>
  4. </head>
  5. <script language="JavaScript" type="text/javascript">
  6. eye.isHorizental = 1; 
  7. eye.xB = 70; 
  8. eye.yB = 20; 
  9. eye.buttDist=5;
  10. eye.x = 400; 
  11. eye.y = 230; 
  12. eye.w = 200; 
  13. eye.h = 120;
  14. eye.r = 260; 
  15. eye.v = 100; 
  16. eye.s = 30.0; 
  17. eye.color = '#000000'; 
  18. eye.colorover = '000000'; 
  19. eye.backgroundcolor = '#000000'; 
  20. eye.backgroundcolorover = '#000000'; 
  21. eye.bordercolor = '#000000'; 
  22. eye.border = 1; 
  23. eye.fontsize = '25'; 
  24. eye.fontfamily = 'Comic Sans MS'; 
  25.  
  26. if (document.getElementById&&document.createElement){
  27.  
  28. document.write('<div id="spinanchor" style="height:'+(eye.h+20)+'px;"><'+'/div>')
  29. eye.anchor=document.getElementById('spinanchor')
  30. eye.spinmenu();
  31. eye.x+=getposOffset(eye.anchor, "left") 
  32. eye.y+=getposOffset(eye.anchor, "top")
  33. eye.spinmenuitem("1.jpg","http://www.google.com", target="_onder");
  34. eye.spinmenuitem("2.jpg","http://www.google.com", target="_onder");
  35. eye.spinmenuitem("3.JPG","http://www.google.com", target="_onder");
  36. eye.spinmenuitem("4.JPG","http://www.google.com", target="_onder");
  37. eye.spinmenuitem("5.JPG","http://www.google.com", target="_onder");
  38. eye.spinmenuitem("6.JPG","http://www.google.com", target="_onder");
  39. eye.spinmenuitem("7.JPG","http://www.google.com", target="_onder");
  40. eye.spinmenuitem("8.JPG","http://www.google.com", target="_onder");
  41. eye.spinmenuitem("9.JPG","http://www.google.com", target="_onder");
  42.  
  43. eye.spinmenuclose();
  44. }
  45. else{
  46. document.write('This is only a test page for a certain script. Your browser is too outdated to display what the script is about.');
  47. }
  48. </script>
  49. <body >
  50. <div style="position:absolute;left:300px">
  51.  
  52. </body>
  53. </html>
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#7: Jul 20 '09

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
#8: Jul 20 '09

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>
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#9: Jul 20 '09

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
#10: Jul 20 '09

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).
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. 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)
  3. 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()}};
  4.  
  5. function getposOffset(what, offsettype)
  6. {
  7.     var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
  8.     var parentEl=what.offsetParent;
  9.  
  10.     while (parentEl!=null)
  11.     {
  12.         totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;
  13.         parentEl=parentEl.offsetParent;
  14.     }
  15. return totaloffset;
  16. }
  17.  
  18. eye.isHorizental = 1; 
  19. eye.xB = 70; 
  20. eye.yB = 20; 
  21. eye.buttDist=5;
  22. eye.x = 400; 
  23. eye.y = 230; 
  24. eye.w = 200; 
  25. eye.h = 120;
  26. eye.r = 260; 
  27. eye.v = 100; 
  28. eye.s = 30.0; 
  29. eye.color = '#000000'; 
  30. eye.colorover = '000000'; 
  31. eye.backgroundcolor = '#000000'; 
  32. eye.backgroundcolorover = '#000000'; 
  33. eye.bordercolor = '#000000'; 
  34. eye.border = 1; 
  35. eye.fontsize = '25'; 
  36. eye.fontfamily = 'Comic Sans MS'; 
  37.  
  38.  
  39. if (document.getElementById&&document.createElement){
  40.  
  41. document.write('<div id="spinanchor" style="height:'+(eye.h+20)+'px;"><'+'/div>')
  42. eye.anchor=document.getElementById('spinanchor')
  43. eye.spinmenu();
  44. eye.x+=getposOffset(eye.anchor, "left") 
  45. eye.y+=getposOffset(eye.anchor, "top")
  46. eye.spinmenuitem("1.jpg","http://www.google.com", target="_onder");
  47. eye.spinmenuitem("2.jpg","http://www.google.com", target="_onder");
  48. eye.spinmenuitem("3.JPG","http://www.google.com", target="_onder");
  49. eye.spinmenuitem("4.JPG","http://www.google.com", target="_onder");
  50. eye.spinmenuitem("5.JPG","http://www.google.com", target="_onder");
  51. eye.spinmenuitem("6.JPG","http://www.google.com", target="_onder");
  52. eye.spinmenuitem("7.JPG","http://www.google.com", target="_onder");
  53. eye.spinmenuitem("8.JPG","http://www.google.com", target="_onder");
  54. eye.spinmenuitem("9.JPG","http://www.google.com", target="_onder");
  55.  
  56. eye.spinmenuclose();
  57. }
  58. else{
  59. document.write('This is only a test page for a certain script. Your browser is too outdated to display what the script is about.');
  60. }
  61. </script>
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#11: Jul 21 '09

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
#12: Jul 21 '09

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.
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#13: Jul 21 '09

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:
Expand|Select|Wrap|Line Numbers
  1. eye.spinmenuitem("<img src='1.jpg'>","http://www.google.com", target="_onder");
Newbie
 
Join Date: Jul 2009
Posts: 7
#14: Jul 21 '09

re: rotate images automatically when page loads


Can you fix it and post the correct one?
Thank you!
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#15: Jul 21 '09

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
#16: Jul 24 '09

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!
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#17: Jul 24 '09

re: rotate images automatically when page loads


One thing at a time.
Quote:

Originally Posted by marcolee View Post

I want it to rotate automatically. What do I need to change?

Can you see the code for the buttons:
Expand|Select|Wrap|Line Numbers
  1. <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
#18: Jul 28 '09

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?
Reply