Newbie Member
6Oct2010,20:13   #21
kipfinch's Avatar
Quote:
Originally Posted by pradeep View Post
Well, this script rotates the image at a preset timed interval, but for sliding the image, u'll need to change the position of the image using a javascript timer.
u can gradually increase the left css value, then it'll slide from left to right!
Can you please give me more details on this. I've been looking for quite a while on a simple javascript to slide a set of images (one at a time) left to right instead of rotating them.

Any help would be greatly appreciated!
Newbie Member
12Nov2010,12:05   #22
delsian's Avatar
Thank you very much for the solution. It works great. Could you please help me to figure out how to use it in case where image comes from CSS? I tried to use an id name but it didn't work..

I was also interested how to make this script load random image instead of rotation every time the page is visited?

Thank you.
Newbie Member
22Dec2010,20:57   #23
alexharper's Avatar
Hi Guys

Can any one tell me how to link to the images when they are in:

var ImageArr1 = new Array( "pic1.jpg","pic2.jpg","pic3.jpg");

cheers
Go4Expert Member
27Dec2010,16:58   #24
rameshb's Avatar
Thank you for the post i was searching the same . Thank you for your post
Newbie Member
14Nov2011,21:44   #25
LadyAnglesey's Avatar
Quote:
Originally Posted by dichotom View Post
Code:
<a id="imageurl" name="imageurl"><img src="Rotating1" id="Rotating1" border="0" alt="Rotating1" name="Rotating1" onmouseover="StopRotation();" onmouseout="RotateImages();"/></a>
<script language="javascript" type="text/javascript">

  var currentImage = 0;
  function RotateImages()
  {
    var a = new Array("1.jpg","2.jpg","3.jpg", "4.jpg");
    var c = new Array("url1", "url2", "url3", "url4");
    var b = document.getElementById('Rotating1');
    var d = document.getElementById('imageurl');

    currentImage++;

    if(currentImage>= a.length)
      currentImage=0;

    b.src = a[currentImage];
    d.href = c[currentImage];

    rotator = window.setTimeout("RotateImages(" + (currentImage+1) + ")",3000);
  }

  function StopRotation()
  {
    window.clearTimeout(rotator);
  }

  RotateImages();

</script>
There we go, pauses on mouseover, and then continues to next image on mouseout. Still xhtml 1.0 trasitional certified.
This works great! Except, I don't need the url goto, just the rotating images. I'm a novice and, try as I might, I can't figure out how to exclude the url function. (When I delete what seems to me the relevant code, my images cease to rotate.) Can any kind, lovely person sort me out? Thanks!
Newbie Member
27Dec2011,20:15   #26
GopalGK's Avatar
HTML Code:
<body><a id="imageurl" ><img id="Rotating1" border="0"></img></a><script language="JavaScript">     function RotateImages(Start)  {      var a = new Array("image1.jpg","image2.jpg","image3.jpg", "image4.jpg");      var c = new Array("url1", "url2", "url3", "url4");      var b = document.getElementById('Rotating1');      var d = document.getElementById('imageurl');      if(Start>=a.length)          Start=0;      b.src = a[Start];      d.href = c[Start];      window.setTimeout("RotateImages(" + (Start+1) + ")",3000);  }    RotateImages(0);    </script></body>
I have used the above code to the fullest. It works great.
I have additionally embedded the rotating images in a table.
The images are of varying sizes.
Currently all the images start on the left edge in the table.
How do I center these images in the table so that they spring out from the table center? I have used additional table code as below.
HTML Code:
</table>
</div>
<table border="1" width="350" height="200" align="center" >
<tr>
  <td>
   <p align=”center”>
<body>
ROTATING IMAGE CODE
HTML Code:
  RotateImages(0);
    </script>
</body>
</p>
</td>
</tr>
</table>
Note that <p align=”center”> does not help to center these images in the table.
Last edited by shabbir; 28Dec2011 at 10:27.. Reason: Code blocks
Newbie Member
4Feb2012,02:02   #27
aliens's Avatar
I'm pretty limited technically, but was able to get the simple java script, shown below, to work (thank you for sharing it, "Phisolophe").

Now, I'd like to add this functionality -
If someone clicks on whatever rotating image is being shown at the moment, they will go to a corresponding unique URL that is associated with that image. (like the rotating image on the Yahoo.com home page works).

Could anyone tell me a simple way to add this function to the script shown below? Thanks!

<a id="imageurl" ><img id="Rotating1" border="0"></img></a>
<script language="JavaScript">

function RotateImages(Start)
{
var a = new Array("image1.jpg","image2.jpg","image3.jpg", "image4.jpg");
var c = new Array("url1", "url2", "url3", "url4");
var b = document.getElementById('Rotating1');
var d = document.getElementById('imageurl');
if(Start>=a.length)
Start=0;
b.src = a[Start];
d.href = c[Start];
window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
}

RotateImages(0);

</script>
Page 3 of 3
1
2
3