[SOLVED] Image rotator

Jurge · February 23, 2009

Okay first I have to apolagize because the solutions is probably very simple but I don't know my JS

What i wanted to make is an image that changes every 5 seconds or so but each image has a different link.

I used a code that looks like this to achieve the changing but i didn't know how to add links.

Head

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
</script>
</HEAD>

[body]

<BODY OnLoad="rotateImage('rImage')">

<center>
<img name="rImage" src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120 height=90>
</center>

rhodesa · February 23, 2009

<html>
<script type="text/javascript">
var interval = 2.5; // delay between rotating images (in seconds)
var images = [
  {
    src : "http://javascript.internet.com/img/image-cycler/01.jpg",
    url : "http://www.google.com"
  },
  {
    src : "http://javascript.internet.com/img/image-cycler/02.jpg",
    url : "http://www.yahoo.com"
  },
  {
    src : "http://javascript.internet.com/img/image-cycler/03.jpg",
    url : "http://www.cnn.com"
  },
  {
    src : "http://javascript.internet.com/img/image-cycler/04.jpg",
    url : "http://www.nbc.com"
  }
];

var current = -1;
function rotateImage ( ) {
  //Get a random index that isn't the current index
  var rand;
  do{
    rand = Math.floor(Math.random() * (images.length));
  }while (rand == current);
  current = rand;
  //Load image and link
  var image = images[rand];
  document.getElementById('rImage').src = image.src;
  document.getElementById('rImageLink').href = image.url;
}
function preloadImages ( ) {
  for(var n=0;n < images.length;n++){
    images[n]['preload'] = new Image();
    images[n]['preload'].src = images[n].src;
  }
}
function startRotating ( ) {
  rotateImage();
  preloadImages();
  setInterval('rotateImage();',interval * 1000);
}
window.onload = startRotating;
</script>
</head>
<body>
<div style="text-align: center;">
<a id="rImageLink" src=""><img id="rImage" src="" width="120" height="90"></a>
</div>
</body>
</html>

Jurge · February 23, 2009

sweet thanks man. :-*

Sign In

[SOLVED] Image rotator

Recommended Posts

Jurge

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

Jurge

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information