Need to display two image areas that change on page refresh [Archive]

View Full Version : 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?

<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.

<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

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:

<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:

<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>