Lets say you wanted to have two images on the page change at the same time... and the images related to each other so that ....
When showImage loads you have a 2nd image location on the page that goes along with it.
I'm trying to make it so that the leftcolumn and rightcolumn of my page change insync with each other but at random.
I'm just learning javascript but think I understand the logic needed.
slightly modified version of the same code to get two images that are linked to show up:
<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()
theImages[0] = 'Picture_Index_Left_Rotate_1.jpg'
theImages[1] = 'Picture_Index_Left_Rotate_2.jpg'
theImages[2] = 'Picture_Index_Left_Rotate_3.jpg'
theImages[3] = 'Picture_Index_Left_Rotate_4.jpg'
theImages[4] = 'Picture_Index_Left_Rotate_5.jpg'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
if(whichImage==0){
document.write('<img src="Picture_Index_Left_Rotate_1.jpg" width="407" height="336" border="0" />');
}
else if(whichImage==1){
document.write('<img src="Picture_Index_Left_Rotate_2.jpg" width="407" height="336" border="0" />');
}
else if(whichImage==2){
document.write('<img src="Picture_Index_Left_Rotate_3.jpg" width="407" height="336" border="0" />');
}
else if(whichImage==3){
document.write('<img src="Picture_Index_Left_Rotate_4.jpg" width="407" height="336" border="0" />');
}
else if(whichImage==4){
document.write('<img src="Picture_Index_Left_Rotate_5.jpg" width="407" height="336" border="0" />');
}
}
function showImage2(){
if(whichImage==0){
document.write('<img src="Picture_Index_Right_Rotate_1.jpg" width="518" height="336" />');
}
else if(whichImage==1){
document.write('<img src="Picture_Index_Right_Rotate_2.jpg" width="518" height="336" />');
}
else if(whichImage==2){
document.write('<img src="Picture_Index_Right_Rotate_3.jpg" width="518" height="336" />');
}
else if(whichImage==3){
document.write('<img src="Picture_Index_Right_Rotate_4.jpg" width="518" height="336" />');
}
else if(whichImage==4){
document.write('<img src="Picture_Index_Right_Rotate_5.jpg" width="518" height="336" />');
}
}
</script>
after this use
<script>showImage();</script> and <script>showImage2();</script>
where you need the image to show up in the body
(note - took out link so if you need it to link add the <a href> tag)
Also - the images are called staticly...so no need for the i variable here