Menu
Hello. What I am wanting to do is have random images rotate on my index page. I’m wanting these images to be hyperlinks to the corresponding products page. I added the link array at top for reference on the 2nd script below but how do I change the function at the bottom to have the corresponding links with the images matched up together? Or how do I modify the first script to incorporate the image rotation/cycle without the refresh?
————————
Some more info. The first example displays a random picture with the correct link associated with the picture. The only problem is the script doesn’t automatically reload another random image without a refresh. If you hit refresh and reload the page you will get a different random image with a link.
The second example randomly changes the images on the page every 6 seconds or so. The only thing about this one is I’m not sure how to associate this function with the links and make it work. I’ve tried a few things but can’t get it to work.
What I’m wanting is a combination of the two. I want a random picture with its corresponding link when clicked. If this image isn’t clicked I want it to change or cycle from one of the random linked pictures to another.
Thanks for your help!!
[CODE]
<!–I have this which isn’t rotating pictures but the link works:–>
<script language=”JavaScript”>
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]=”../new/images/cc/random_images/4719lr.jpg”
myimages[2]=”../new/images/cc/random_images/6754lr.jpg”
myimages[3]=”../new/images/cc/random_images/71HHGlr.jpg”
//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]=”http://www.link1.com”
imagelinks[2]=”http://www.link2.com”
imagelinks[3]=”http://www.link3.com”
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write(‘<a href=’+'”‘+imagelinks[ry]+'”‘+’><img src=”‘+myimages[ry]+'” border=0></a>’)
}
//–>
</script>
<!–
##############################
Second try below
##############################
Or I have this which rotates images but I’m not sure how to add the link var to the function at bottom:
–>
<script language=”JavaScript”>
<!– Begin
var imagelinks=new Array()
imagelinks[1]=”http://www.link1.com”
imagelinks[2]=”http://www.link2.com”
imagelinks[3]=”http://www.link3.com”
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1500;
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem(“../new/images/cc/random_images/4719lr.jpg”);
image_list[image_index++] = new imageItem(“../new/images/cc/random_images/6754lr.jpg”);
image_list[image_index++] = new imageItem(“../new/images/cc/random_images/71HHGlr.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);
}
// End –>
</script>