[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript Link Rotation

Posted on 2009-04-25
6
Medium Priority
?
553 Views
Last Modified: 2012-05-06
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
Comment
Question by:jsuissa
  • 4
  • 2
6 Comments
 
LVL 14

Expert Comment

by:sam2912
ID: 24234480

<!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
 
LVL 14

Expert Comment

by:sam2912
ID: 24234485
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
 

Author Comment

by:jsuissa
ID: 24234522
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Expert Comment

by:sam2912
ID: 24234667
If you don't want a 'slideshow', remove this line:
setTimeout(rotateImages, (slideshowDelay*1000));

Open in new window

0
 
LVL 14

Accepted Solution

by:
sam2912 earned 2000 total points
ID: 24277424
Did it solve the problem for you?
0
 

Author Closing Comment

by:jsuissa
ID: 31574607
sam2192 did an excellent job of sovling our Javascript issue and was very helpful with his solution and answers to our questions.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question