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.
17  4049  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
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.
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
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
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>
Do you want to achieve the same thing as what the OP wanted? What is this "eye" object in your code?
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>
You'd have to post that code. What is the code supposed to do? What is it doing instead?
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>
Have you got the documentation for this script? Do you have a link?
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");
Can you fix it and post the correct one?
Thank you!
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.
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!
One thing at a time.
@marcolee
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.
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?
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Dave Griffiths |
last post by:
Hi all
Very new to JavaScript, I am trying to cache a number of images as the
page loads, is there a max number of images or memory usage before the
browser stops caching.
My PC has 1G ram so...
|
by: Nik Coughlin |
last post by:
Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?
The functions need to be fast enough for use in a...
|
by: cosmic foo |
last post by:
I have a page with about 100 images of about 10k each.
where a typical img tag looks like this,
<img src="item001.jpg" height="70" alt="" onMouseOver="showPic(this)"
border="0">
Not all the...
|
by: santel_helvis |
last post by:
Hi All,
Could anyone tell me how to rotate the image in javascript. Which
concepts I should concentrate to rotate the image
|
by: sales |
last post by:
Hello,
I am trying to get my website checkout page to rotate / take turns
displaying shopping comparison engine surveys rather than display them
all 4 at the same time, thus overwhelming &...
|
by: Samuel Shulman |
last post by:
Is it possible and how to rotate pictures in HTML document
Thank you,
Samuel
|
by: Diego F. |
last post by:
Hi all. I have a listview with images and my application must be able to
rotate one image. I need a method to rotate 90 degrees rigth (i.e.).
Is that possible?
--
Regards,
Diego F.
|
by: Ronald S. Cook |
last post by:
Hi,
Is there a control (either built-in or 3rd party) that I can put on my web
page that I can set up to "rotate" through, let's say, images of employees
at our company... say 5 seconds each.
...
|
by: =?Utf-8?B?dmlubw==?= |
last post by:
Hello,
I have created my proper control and i would to rotate it.
In the paint event of my object, i have written :
Dim graph As Graphics = myObject.CreateGraphics
myMatrix = New...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
| |
