Forum Moderators: open
-justin
<script language="JavaScript">
<!--
var theImages = new Array(8)
theImages[0] = '/portals/neqha/ads/dhs.jpg'
theImages[1] = '/portals/neqha/ads/danielle.jpg'
theImages[2] = '/portals/neqha/ads/luckyd.jpg'
theImages[3] = '/portals/neqha/ads/Mcwhirter_ad.jpg'
theImages[4] = '/portals/neqha/ads/rystrom_ad.jpg'
theImages[5] = '/portals/neqha/ads/wolfbros_ad.jpg'
theImages[6] = '/portals/neqha/ads/ellerbroek ad.jpg'
theImages[7] = '/portals/neqha/ads/space_sold.jpg'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 4; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
function showImage2(){
document.write('<img src="'+theImages[whichImage+1]+'">');
}
function showImage3(){
document.write('<img src="'+theImages[whichImage+2]+'">');
}
function showImage4(){
document.write('<img src="'+theImages[whichImage+3]+'">');
}
function showImage5(){
document.write('<img src="'+theImages[whichImage+4]+'">');
}
function showImage6(){
document.write('<img src="'+theImages[whichImage+5]+'">');
}
function showImage7(){
document.write('<img src="'+theImages[whichImage+6]+'">');
}
//-->
</script>
<script language="JavaScript">
<!--
showImage();
showImage2();
showImage3();
showImage4();
showImage5();
showImage6();
showImage7();
//-->
</script>
and a warm welcome to these forums. ;)
Firstly, I would advise against the use of the deprecated document.write().
Instead use the modern method document.getElementById().
Also note that your method will not display any images for those users that have javascript disabled.
Have a look at this example, it may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script type="text/javascript">
var theImages=[
'/portals/neqha/ads/dhs.jpg','/portals/neqha/ads/danielle.jpg',
'/portals/neqha/ads/luckyd.jpg','/portals/neqha/ads/Mcwhirter_ad.jpg',
'/portals/neqha/ads/rystrom_ad.jpg','/portals/neqha/ads/wolfbros_ad.jpg',
'/portals/neqha/ads/ellerbroek ad.jpg','/portals/neqha/ads/space_sold.jpg'
];var ary0=[];
var ary1=[];
var k=0
var c,n;function randomImgDisplay() {
for(c=0;c<theImages.length;c++) {
ary0[c]=c; // Pre-populate 'ary0' with numbers 0 to 7
}
while(ary0.length>0) {n=Math.floor(Math.random()*ary0.length); // Get a random 'ary0' index number
ary1[k]=ary0[n]; // Add 'ary0' value to 'ary1'
k++;
ary0.splice(n,1); // Remove that element from the 'ary0'. The array gets shorter with each iteration}
for(c=0;c<theImages.length;c++){
document.getElementById('pic'+c).src=theImages[ary1[c]]; //replace the image positions
}
}
window.onload=function() {
randomImgDisplay();
}
</script></head>
<body><div>
<img id="pic0" src="/portals/neqha/ads/dhs.jpg" alt="">
<img id="pic1" src="/portals/neqha/ads/danielle.jpg" alt="">
<img id="pic2" src="/portals/neqha/ads/luckyd.jpg" alt="">
<img id="pic3" src="/portals/neqha/ads/Mcwhirter_ad.jpg" alt="">
<img id="pic4" src="/portals/neqha/ads/rystrom_ad.jpg" alt="">
<img id="pic5" src="/portals/neqha/ads/wolfbros_ad.jpg" alt="">
<img id="pic6" src="/portals/neqha/ads/ellerbroek ad.jpg" alt="">
<img id="pic7" src="/portals/neqha/ads/space_sold.jpg" alt="">
</div></body>
</html>
-justin
I got it working and it works great! The one thing that I forgot to mention on the initial post was I also wanted to include a link for each image. I tried to add it to the bottom images in the <div> but even though the images change the links stay in the same order. Is there a way to modify this to include links that rotate with the images? Sorry to keep bugging you!
-justin
here is the revised code...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
[red]
<style type="text/css">
img {
border:0;
}
</style>
[/red]
<script type="text/javascript">var theImages=[
'/portals/neqha/ads/dhs.jpg','/portals/neqha/ads/danielle.jpg',
'/portals/neqha/ads/luckyd.jpg','/portals/neqha/ads/Mcwhirter_ad.jpg',
'/portals/neqha/ads/rystrom_ad.jpg','/portals/neqha/ads/wolfbros_ad.jpg',
'/portals/neqha/ads/ellerbroek ad.jpg','/portals/neqha/ads/space_sold.jpg'
];
[red]
var theLinks=[
'yourLinkOne.html','yourLinkTwo.html',
'yourLinkThree.html','yourLinkFour.html',
'yourLinkFive.html','yourLinkSix.html',
'yourLinkSeven.html','yourLinkEight.html'
];
[/red]
var ary0=[];
var ary1=[];
var k=0
var c,n;function randomImgDisplay() {
for(c=0;c<theImages.length;c++) {
ary0[c]=c; // Pre-populate 'ary0' with numbers 0 to 7
}while(ary0.length>0) {
n=Math.floor(Math.random()*ary0.length); // Get a random 'ary0' index number
ary1[k]=ary0[n]; // Add 'ary0' value to 'ary1'
k++;
ary0.splice(n,1); // Remove that element from the 'ary0'. The array gets shorter with each iteration}
for(c=0;c<theImages.length;c++){
document.getElementById('pic'+c).src=theImages[ary1[c]]; //replace the image positions[red]
document.getElementById('lnk'+c).href=theLinks[ary1[c]]; //replace the url positions[/red]
}
}
window.onload=function() {
randomImgDisplay();
}
</script></head>
<body><div>
[red]<a id="lnk0" href="yourLinkOne.html">[/red]<img id="pic0" src="/portals/neqha/ads/dhs.jpg" alt="">[red]</a>[/red]
[red]<a id="lnk1" href="yourLinkTwo.html">[/red]<img id="pic1" src="/portals/neqha/ads/danielle.jpg" alt="">[red]</a>[/red]
[red]<a id="lnk2" href="yourLinkThree.html">[/red]<img id="pic2" src="/portals/neqha/ads/luckyd.jpg" alt="">[red]</a>[/red]
[red]<a id="lnk3" href="yourLinkFour.html">[/red]<img id="pic3" src="/portals/neqha/ads/Mcwhirter_ad.jpg" alt="">[red]</a>[/red]
[red]<a id="lnk4" href="yourLinkFive.html">[/red]<img id="pic4" src="/portals/neqha/ads/rystrom_ad.jpg" alt="">[red]</a>[/red]
[red]<a id="lnk5" href="yourLinkSix.html">[/red]<img id="pic5" src="/portals/neqha/ads/wolfbros_ad.jpg" alt="">[red]</a>[/red]
[red]<a id="lnk6" href="yourLinkSeven.html">[/red]<img id="pic6" src="/portals/neqha/ads/ellerbroek ad.jpg" alt="">[red]</a>[/red]
[red]<a id="lnk7" href="yourLinkEight.html">[/red]<img id="pic7" src="/portals/neqha/ads/space_sold.jpg" alt="">[red]</a>[/red]
</div></body>
</html>
birdbrain
Thanks again, I was able to get all the links to work. I have one issue with setting the targets so some open in a new window and some don't and the alt tags don't seem to match up but I am sure I can figure that out. Thanks for all your help!
-justin
in the same way that we added theLinks to the script..
add something like this...
var theTitles=[
'title 1','title 2',
'title 3','title 4',
'title 5','title 6',
'title 7','title 8'
]
document.getElementById('pic'+c).alt=theTitles[ary1[c]];
document.getElementById('pic'+c).title=theTitles[ary1[c]];
birdbrain
