This is CHALLENGING!

Okay, so i was given this small project and realized when i was ready to put the pieces together, i realized it was more difficult than i had imagined.

I have 8 different headers. These headers have an image of a car, a face, the logo and our phone number. Each header has different background colors to them. The goal of this is to have the header image change upon refresh.

Issue is...our slogan which is underneath the logo is text...NOT an image and that will always remain. I've built it in html and it looks fine. The problem I'm having is placing the script as a background.



Here's the script, where the background image is...

<script>showImage();</script>



And here's what I have as the script....

<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()

//Random-loading images
theImages[0] = 'http://nodents.com/header1.jpg' // replace with names of images
theImages[1] = 'http://nodents.com/header2.jpg' // replace with names of images
theImages[2] = 'http://nodents.com/header3.jpg' // replace with names of images
theImages[3] = 'http://nodents.com/header4.jpg' // replace with names of images
theImages[4] = 'http://nodents.com/header5.jpg' // replace with names of images
theImages[5] = 'http://nodents.com/header6.jpg' // replace with names of images
theImages[6] = 'http://nodents.com/header7.jpg' // replace with names of images
theImages[7] = 'http://nodents.com/header8.jpg' // replace with names of images

var j = 0
var p = theImages.length;
var preBuffer = new Array()

for (i = 0; i < p; i++){
preBuffer = new Image()
preBuffer.src = theImages
}
var whichImage = Math.round(Math.random()*(p-1));

function showImage(){
if(whichImage==0){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==1){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==2){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==3){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==4){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==5){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==6){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==7){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==8){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==9){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==10){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==11){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==12){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==13){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==14){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==15){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}
else if(whichImage==16){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 align=center></a>');
}

}

</script>



one of the problems can be is...i have this script in that index page as well for another image change upon refresh. The only thing that's different are the links of the images within the script.

 

The logo image placeholder (<IMG> tag) should not be written by JS, it should be hard-coded with a default image, and should have a name attribute, say 'mainLogo'. That way you still get a display with JS disabled.
The same applies to the link around the image, which presumably will always have the same URL.

Somewhere soon after the logo image, insert this modified code:

<SCRIPT type="text/javascript">

var theImages = new Array();

//Random-loading images
theImages[0] = 'http://nodents.com/header1.jpg' // replace with names of images
theImages[1] = 'http://nodents.com/header2.jpg' // replace with names of images
theImages[2] = 'http://nodents.com/header3.jpg' // replace with names of images
theImages[3] = 'http://nodents.com/header4.jpg' // replace with names of images
theImages[4] = 'http://nodents.com/header5.jpg' // replace with names of images
theImages[5] = 'http://nodents.com/header6.jpg' // replace with names of images
theImages[6] = 'http://nodents.com/header7.jpg' // replace with names of images
theImages[7] = 'http://nodents.com/header8.jpg' // replace with names of images

var p = theImages.length;
var preBuffer = new Array()

for (var i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.floor(Math.random()*p);

document.images['mainLogo'].src=preBuffer[whichImage].src;
</script>

Code (markup):

Provided that you change the name of the image array, you can repeat the above code.
Of course you could commission a cookie-enhanced version that never repeats consecutively...

 

i placed that in there...thanks for that

but what about where the background image goes?

here's the tag

<td width="716" valign="top" background="header1.jpg">

it shows the image but it doesn't rotate...

http://nodents.com/index_header_test.html

 

I would think that your easiest fix would be to use JS to add the text to the bottom of each image, creating a new image name then use those new images names.