Hi,
What I’m trying to figure out is how to get background images to rotate with a fade in a header without using an image in div in the body.
A combination of javascript and CSS – not sure if this is the correct forum or not?
I can achieve an image changing/rotating in a div using the code just below. But I have to refresh the page for the image to change.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Rotate Images</title>
<script type="text/javascript">
var backgroundSrcs = new Array("list-of-images");
function pickimage()
{
//This line picks an image at random from the list you entered above
var bgimage=backgroundSrcs[(Math.round(Math.random()*(backgroundSrcs.length-1)))]
//This line applies the background image to your header
//document.getElementById("header").style.backgroundimage = "url('" + bgimage + "')";
document.getElementById("header").style.background = "url('" + bgimage + "') no-repeat";
}
</script>
<style type="text/css">
#header {
padding:125px 10px;
margin-top: 0px;
background-repeat: no-repeat;
}
h1 {
padding-bottom: 0;
font-size: 1.95em;
color: #f0ebee;
}
</style>
</head>
<body onLoad="pickimage();">
<div id="header">
<h1>abc def ghi</h1>
</div>
</body>
</html>
And I can get the image to rotate, change on its own, with the javascript below but have to do it using through an img div, a place-holder.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Rotate Images through img tag</title>
<script type="text/javascript">
var rotatingImages = new Array("../list-of-images");
imageCount = rotatingImages.length;
firstTime = true;
duration = "3"; //seconds
function rotateImage(){
// Cycle through images sequentially starting with a random image
// Do not update the image if loading is not yet completed
if (document.getElementById('rotatingImage').complete || firstTime){
if (firstTime) {
thisImage = Math.floor((Math.random() * imageCount))
firstTime = false
}else{
thisImage++
if (thisImage == imageCount) {
thisImage = 0
}
}
document.getElementById('rotatingImage').src = rotatingImages[thisImage]
setTimeout("rotateImage()", duration * 1000)
}
}
</script>
<style type="text/css">
#rotatingImage{
display:block;
width:750px;
border:2px solid #997;
}
</style>
</head>
<body onLoad="rotateImage();">
<div id="header">
[I]<img id="rotatingImage" src="" alt="">[/I]
</div>
</body>
</html>
So what I really would like to do is have the image rotate through the div and not have to have the img tag present.
I haven’t even tackled the fade but have some thoughts about this. Since it’s the header div I want to do the fading not the img tag, I’m thinking the way to make the fade work will be the same.
thanks so much in advance