• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 559
  • Last Modified:

Javascript Link Rotation

Hi,

We have a site at www.centralconsulting.com using inline Javascript to randomly rotate between five case study images that are linked to the appropriate page.

However, in a seperate layer below we have a View case study link and we would like this like to also match the randomly selected link from the Javascript image above.

Any help on how to accomplish this would be very much appreciated.
0
jsuissa
Asked:
jsuissa
  • 4
  • 2
1 Solution
 
Samuel LiewCommented:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"><!--
var images = new Array(), links = new Array();
var img_preload = new Array();
var slideshowDelay = 5; // in secs [3].. [10]
 
// Add relative image urls here
images.push("image1.jpg");
images.push("image2.jpg");
images.push("image3.jpg");
images.push("image4.jpg");
images.push("image5.jpg");
// add more image 1 by copying the line above
 
links.push("url1.html");
links.push("url2.html");
links.push("url3.html");
links.push("url4.html");
links.push("url5.html");
// add more links by copying the line above
 
// preload images
for(i=0;i<images.length;i++) {
var img = new Image(); 
img.src = ""+images[i];
img_preload.push(img);
}
 
var num=-1; // don't change this value
function rotateImages() {
	if(images[++num]==undefined || links[num]==undefined) num++;
	if(num>images.length) num=0;
	
	document.getElementById("img").src=images[num];
	document.getElementById("thelink").href=links[num];
	document.getElementById("thelink").innerHTML=links[num];
	setTimeout(rotateImages, (slideshowDelay*1000));
}
 
function init() {
	if(images.length!=0 && links.length!=0) {
		alert('Slideshow is starting!'); // Remove
		rotateImages();
		alert('Slideshow has started!'); // Remove
	}
}
//--></script>
</head>
 
<body onload="init();">
<img id="img" src="" /><br />
<a href="#" id="thelink">Link Text</a>
</body>
</html>

Open in new window

0
 
Samuel LiewCommented:
Okay, I missed out the random part. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"><!--
var images = new Array(), links = new Array();
var img_preload = new Array();
var slideshowDelay = 5; // in secs [3].. [10]
var randomize = true; // display random image? [true:yes, false:no]
 
// Add relative image urls here
images.push("image1.jpg");
images.push("image2.jpg");
images.push("image3.jpg");
images.push("image4.jpg");
images.push("image5.jpg");
// add more image 1 by copying the line above
 
links.push("url1.html");
links.push("url2.html");
links.push("url3.html");
links.push("url4.html");
links.push("url5.html");
// add more links by copying the line above
 
// preload images
for(i=0;i<images.length;i++) {
var img = new Image(); 
img.src = ""+images[i];
img_preload.push(img);
}
 
var num=-1; // don't change this value
function rotateImages() {
	
	temp=num;
	if(!randomize) {
		if(images[++num]==undefined || links[num]==undefined) num++;
		if(num>images.length) num=0;
	}
	else {
		do {
			num = Math.floor(Math.random()*images.length);
		} while (temp==num); // avoids using same image
	}
		
		document.getElementById("img").src=images[num];
		document.getElementById("thelink").href=links[num];
		document.getElementById("thelink").innerHTML=links[num];
		setTimeout(rotateImages, (slideshowDelay*1000));
}
 
function init() {
	if(images.length!=0 && links.length!=0) {
		alert('Slideshow is starting!'); // Remove
		rotateImages();
		alert('Slideshow has started!'); // Remove
	}
}
//--></script>
</head>
 
<body onload="init();">
<img id="img" src="" /><br />
<a href="#" id="thelink">Link Text</a>
</body>
</html>

Open in new window

0
 
jsuissaAuthor Commented:
Thanks..this looks good, but we only need one image to show per vist to the site so is there is reason slideshowDelay is there?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Samuel LiewCommented:
If you don't want a 'slideshow', remove this line:
setTimeout(rotateImages, (slideshowDelay*1000));

Open in new window

0
 
Samuel LiewCommented:
Did it solve the problem for you?
0
 
jsuissaAuthor Commented:
sam2192 did an excellent job of sovling our Javascript issue and was very helpful with his solution and answers to our questions.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now