469,632 Members | 1,730 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,632 developers. It's quick & easy.

rotate images automatically when page loads

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.
Nov 14 '08 #1
17 3849
gits
5,390 Expert Mod 4TB
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
Nov 14 '08 #2
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.
Nov 17 '08 #3
gits
5,390 Expert Mod 4TB
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
Nov 18 '08 #4
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
Nov 18 '08 #5
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>
Jul 19 '09 #6
acoder
16,027 Expert Mod 8TB
Do you want to achieve the same thing as what the OP wanted? What is this "eye" object in your code?
Jul 20 '09 #7
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>
Jul 20 '09 #8
acoder
16,027 Expert Mod 8TB
You'd have to post that code. What is the code supposed to do? What is it doing instead?
Jul 20 '09 #9
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>
Jul 20 '09 #10
acoder
16,027 Expert Mod 8TB
Have you got the documentation for this script? Do you have a link?
Jul 21 '09 #11
http://bytes.com/topic/javascript/an...ds#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.
Jul 21 '09 #12
acoder
16,027 Expert Mod 8TB
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");
Jul 21 '09 #13
Can you fix it and post the correct one?
Thank you!
Jul 21 '09 #14
acoder
16,027 Expert Mod 8TB
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.
Jul 21 '09 #15
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!
Jul 24 '09 #16
acoder
16,027 Expert Mod 8TB
One thing at a time. @marcolee
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.
Jul 24 '09 #17
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?
Jul 28 '09 #18

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Dave Griffiths | last post: by
21 posts views Thread by Nik Coughlin | last post: by
10 posts views Thread by cosmic foo | last post: by
17 posts views Thread by santel_helvis | last post: by
8 posts views Thread by Samuel Shulman | last post: by
3 posts views Thread by Diego F. | last post: by
2 posts views Thread by Ronald S. Cook | last post: by
13 posts views Thread by =?Utf-8?B?dmlubw==?= | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.