Need to display two image areas that change on page refresh

**Itry** · 08-23-2011, 10:08 AM

Hello,

I was wondering if someone couldhelp me please. I dont really know javascript and how to modify it and I was wondering if someone could show me how to modify my script please.

I have a basic html website and would like to display two images on each page. On page refresh both images would change. I have found the following code which seems to work for one set of images but how can I get the other set to work as well?

Code:

<script type="text/javascript">

function loadNextImage() {
	//get image object
	var myImg = document.getElementById('CImage');

	//declare image directory path and image array
	var thePath = "images/";
	var theImages = new Array();
	theImages[0]="C1.jpg";
	theImages[1]="C2.jpg";
	theImages[2]="C3.jpg";
	theImages[3]="C4.jpg";
	theImages[4]="C5.jpg";
	theImages[5]="C6.jpg";	

				//get current cookie value
				var currentIndex = parseInt(getCookie());
				var imgPath = thePath + theImages[currentIndex];
				myImg.src = imgPath;
				myImg.alt = theImages[currentIndex];
				myImg.title = theImages[currentIndex];
				
				//set next cookie index
				currentIndex += 1;
				if(currentIndex > (theImages.length - 1)) {
					currentIndex = 0;
				}
				setCookie(currentIndex);
			}
			
			function setCookie(someint) {
				var now = new Date();
				var addDays = now.getDate() + 7
				now.setDate(addDays); // cookie expires in 7 days
				var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
				document.cookie = theString;
			}
			
			function getCookie() {
				var output = "0";
				if(document.cookie.length > 0) {
					var temp = unescape(document.cookie);
					temp = temp.split(';');
					for(var i = 0; i < temp.length; i++) {
						if(temp[i].indexOf('imgID') != -1) {
							temp = temp[i].split('=');
							output = temp.pop();
							break;
						}
					}
				}
				return output;
			}

</script>

Below is a stripped down version of my html.

Code:

<body onload="loadNextImage();">
<div id="left">
<img id="CImage" src="" alt="" title=""/>
<img id="LImage" src="" alt="" title=""/>
</div>
</body>

I would like to display a new aray of images in ID Limage so

Code:

	var myImg = document.getElementById('LImage');

	//declare image directory path and image array
	var thePath = "images/";
	var theImages = new Array();
	theImages[0]="L1.jpg";
	theImages[1]="L2.jpg";
	theImages[2]="L3.jpg";
	theImages[3]="L4.jpg";
	theImages[4]="L5.jpg";
	theImages[5]="L6.jpg";
	theImages[6]="L7.jpg";

How do I get the two image areas to display and and refresh in the orders above on each page refresh. I hope I've provided enough information.

Thanks in advance for any help

Jane

**jscheuer1** · 08-23-2011, 11:29 AM

There are more elegant ways. This should work:

Code:

<script type="text/javascript">

function loadNextImage() {
	//get image objects
	var myImg = document.getElementById('CImage');
	var myLImg = document.getElementById('LImage');

	//declare image path
	var thePath = "images/";

	//declare image array
	var theImages = [];
	theImages[0]="C1.jpg";
	theImages[1]="C2.jpg";
	theImages[2]="C3.jpg";
	theImages[3]="C4.jpg";
	theImages[4]="C5.jpg";
	theImages[5]="C6.jpg";	

	//declare 2nd image array
	var theLImages = [];
	theLImages[0]="L1.jpg";
	theLImages[1]="L2.jpg";
	theLImages[2]="L3.jpg";
	theLImages[3]="L4.jpg";
	theLImages[4]="L5.jpg";
	theLImages[5]="L6.jpg";
	theLImages[6]="L7.jpg";

				//get current cookie value
				var currentIndex = getCookie().split('-');
				var imgPath = thePath + theImages[currentIndex[0]];
				var imgLPath = thePath + theLImages[currentIndex[1]];
				myImg.src = imgPath;
				myLImg.src = imgLPath;
				myImg.alt = theImages[currentIndex[0]];
				myLImg.alt = theLImages[currentIndex[1]];
				myImg.title = theImages[currentIndex[0]];
				myLImg.title = theLImages[currentIndex[1]];
				
				//set next cookie indexes
				currentIndex[0] = +currentIndex[0] + 1;
				if(currentIndex[0] > (theImages.length - 1)) {
					currentIndex[0] = 0;
				}
				currentIndex[1] = +currentIndex[1] + 1;
				if(currentIndex[1] > (theLImages.length - 1)) {
					currentIndex[1] = 0;
				}
				setCookie(currentIndex.join('-'));
			}
			
			function setCookie(someints) {
				var now = new Date();
				var addDays = now.getDate() + 7
				now.setDate(addDays); // cookie expires in 7 days
				var theString = 'imgID=' + escape(someints) + ';expires=' + now.toUTCString();
				document.cookie = theString;
			}
			
			function getCookie() {
				var output = "0-0";
				if(document.cookie.length > 0) {
					var temp = unescape(document.cookie);
					temp = temp.split(';');
					for(var i = 0; i < temp.length; i++) {
						if(temp[i].indexOf('imgID') != -1) {
							temp = temp[i].split('=');
							output = temp.pop();
							break;
						}
					}
				}
				return output;
			}

</script>

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**Itry** · 08-23-2011, 01:36 PM

Thanks for your help John but that doesnt seem to work. I've not got the site online yet but Ive put a page up with your code and this is how it looks http://www.whitedogdesign.co.uk/test/index.html

Have I put it in correct?

Thanks in advance.
Jane

**jscheuer1** · 08-23-2011, 01:56 PM

Sorry, I made a several typos. I went back and fixed my previous post, but here it is all fixed up and tested:

Code:

<script type="text/javascript">

function loadNextImage() {
	//get image objects
	var myImg = document.getElementById('CImage');
	var myLImg = document.getElementById('LImage');

	//declare image path
	var thePath = "images/";

	//declare image array
	var theImages = [];
	theImages[0]="C1.jpg";
	theImages[1]="C2.jpg";
	theImages[2]="C3.jpg";
	theImages[3]="C4.jpg";
	theImages[4]="C5.jpg";
	theImages[5]="C6.jpg";	

	//declare 2nd image array
	var theLImages = [];
	theLImages[0]="L1.jpg";
	theLImages[1]="L2.jpg";
	theLImages[2]="L3.jpg";
	theLImages[3]="L4.jpg";
	theLImages[4]="L5.jpg";
	theLImages[5]="L6.jpg";
	theLImages[6]="L7.jpg";

				//get current cookie value
				var currentIndex = getCookie().split('-');
				var imgPath = thePath + theImages[currentIndex[0]];
				var imgLPath = thePath + theLImages[currentIndex[1]];
				myImg.src = imgPath;
				myLImg.src = imgLPath;
				myImg.alt = theImages[currentIndex[0]];
				myLImg.alt = theLImages[currentIndex[1]];
				myImg.title = theImages[currentIndex[0]];
				myLImg.title = theLImages[currentIndex[1]];
				
				//set next cookie indexes
				currentIndex[0] = +currentIndex[0] + 1;
				if(currentIndex[0] > (theImages.length - 1)) {
					currentIndex[0] = 0;
				}
				currentIndex[1] = +currentIndex[1] + 1;
				if(currentIndex[1] > (theLImages.length - 1)) {
					currentIndex[1] = 0;
				}
				setCookie(currentIndex.join('-'));
			}
			
			function setCookie(someints) {
				var now = new Date();
				var addDays = now.getDate() + 7
				now.setDate(addDays); // cookie expires in 7 days
				var theString = 'imgID=' + escape(someints) + ';expires=' + now.toUTCString();
				document.cookie = theString;
			}
			
			function getCookie() {
				var output = "0-0";
				if(document.cookie.length > 0) {
					var temp = unescape(document.cookie);
					temp = temp.split(';');
					for(var i = 0; i < temp.length; i++) {
						if(temp[i].indexOf('imgID') != -1) {
							temp = temp[i].split('=');
							output = temp.pop();
							break;
						}
					}
				}
				return output;
			}

</script>

Thread: Need to display two image areas that change on page refresh

Thread Tools

Search Thread

Need to display two image areas that change on page refresh

Bookmarks

Bookmarks

Posting Permissions