- Impact
- 0
Hi guys. Wondered if you could help.
I have a website with 3 table background images which change every 10 seconds or so. I'm doing this using a javascript which I picked up from a Java site. It works a treat.
However, I want these images to fade in and out of one another rather than flick from one to the next. I'm certain there must be just one line of script which I can pop in to the code that will do this but I'm buggered if I can work out how to do it! Any help would be most appreciated. I will post the code below.
Secondly, the actual site information is contained within a content window using the <iframe> tag. I need this content window to be transparent so that the slideshow background shows through. Again, I've tried everything I can think of to do this but with no joy. Any suggestions?! I know it'll have something to do with a css style that I need to put into the css file, but I can't get any further than that. Any help is most appreciated.
Code below:
<html>
<head>
<title></title>
<style>
#bslide {
/*Remove below line to make bgimage NOT fixed*/
background-attachment:fixed;
background-repeat: no-repeat;
/*Use center center in place of 300 200 to center bg image*/
background-position: center;
}
</style>
<script language="JavaScript1.2">
//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
//Specify background images to slide
var bgslides=new Array()
bgslides[0]="images/janie1.gif"
bgslides[1]="images/janie2.gif"
bgslides[2]="images/janie3.gif"
//Specify interval between slide (in miliseconds)
var speed=3000
//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed=new Image()
processed.src=bgslides
}
var inc=-1
function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.getElementById? document.getElementById('bslide').background=processed[inc].src : document.all['bslide'].background=processed[inc].src
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')
</script>
<link href="janie.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="864" height="500" align="center" id="bslide">
<tr>
<td><table width="864" height="501" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14"> <img src="images/janiechop1_01.gif" width="864" height="136" alt=""></td>
</tr>
<tr>
<td rowspan="3"> <img src="images/janiechop1_02.gif" width="332" height="63" alt=""></td>
<td> <a href="news.htm" target="content"><img src="images/janiechop1_03.gif" alt="" width="56" height="28" border="0"></a></td>
<td colspan="2"> <img src="images/janiechop1_04.gif" width="33" height="28" alt=""></td>
<td colspan="2"> <a href="music.htm" target="content"><img src="images/janiechop1_05.gif" alt="" width="63" height="28" border="0"></a></td>
<td> <img src="images/janiechop1_06.gif" width="32" height="28" alt=""></td>
<td> <a href="biog.htm" target="content"><img src="images/janiechop1_07.gif" alt="" width="46" height="28" border="0"></a></td>
<td colspan="2"> <img src="images/janiechop1_08.gif" width="36" height="28" alt=""></td>
<td> <a href="gigs.htm" target="content"><img src="images/janiechop1_09.gif" alt="" width="45" height="28" border="0"></a></td>
<td> <img src="images/janiechop1_10.gif" width="37" height="28" alt=""></td>
<td> <a href="gallery.htm" target="content"><img src="images/janiechop1_11.gif" alt="" width="85" height="28" border="0"></a></td>
<td rowspan="3"> <img src="images/janiechop1_12.gif" width="99" height="63" alt=""></td>
</tr>
<tr>
<td colspan="2"> <a href="forum.htm" target="content"><img src="images/janiechop1_13.gif" alt="" width="68" height="28" border="0"></a></td>
<td colspan="2"> <img src="images/janiechop1_14.gif" width="32" height="28" alt=""></td>
<td colspan="4"> <a href="merch.htm" target="content"><img src="images/janiechop1_15.gif" alt="" width="144" height="28" border="0"></a></td>
<td> <img src="images/janiechop1_16.gif" width="22" height="28" alt=""></td>
<td colspan="3"> <a href="sas.htm" target="content"><img src="images/janiechop1_17.gif" alt="" width="167" height="28" border="0"></a></td>
</tr>
<tr>
<td colspan="12"> <img src="images/janiechop1_18.gif" width="433" height="7" alt=""></td>
</tr>
<tr>
<td> <img src="images/janiechop1_19.gif" width="332" height="259" alt=""></td>
<td width="433" height="259" colspan="12">
<iframe src="welcome.htm" width="433" height="259" frameborder="0" name="content" scrolling="auto"></iframe></td>
<td> <img src="images/janiechop1_21.gif" width="99" height="259" alt=""></td>
</tr>
<tr>
<td width="864" height="42" colspan="14"> </td>
</tr>
<tr>
<td> <img src="images/spacer.gif" width="332" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="56" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="32" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="22" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="45" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="85" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="99" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
I have a website with 3 table background images which change every 10 seconds or so. I'm doing this using a javascript which I picked up from a Java site. It works a treat.
However, I want these images to fade in and out of one another rather than flick from one to the next. I'm certain there must be just one line of script which I can pop in to the code that will do this but I'm buggered if I can work out how to do it! Any help would be most appreciated. I will post the code below.
Secondly, the actual site information is contained within a content window using the <iframe> tag. I need this content window to be transparent so that the slideshow background shows through. Again, I've tried everything I can think of to do this but with no joy. Any suggestions?! I know it'll have something to do with a css style that I need to put into the css file, but I can't get any further than that. Any help is most appreciated.
Code below:
<html>
<head>
<title></title>
<style>
#bslide {
/*Remove below line to make bgimage NOT fixed*/
background-attachment:fixed;
background-repeat: no-repeat;
/*Use center center in place of 300 200 to center bg image*/
background-position: center;
}
</style>
<script language="JavaScript1.2">
//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
//Specify background images to slide
var bgslides=new Array()
bgslides[0]="images/janie1.gif"
bgslides[1]="images/janie2.gif"
bgslides[2]="images/janie3.gif"
//Specify interval between slide (in miliseconds)
var speed=3000
//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed=new Image()
processed.src=bgslides
}
var inc=-1
function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.getElementById? document.getElementById('bslide').background=processed[inc].src : document.all['bslide'].background=processed[inc].src
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')
</script>
<link href="janie.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="864" height="500" align="center" id="bslide">
<tr>
<td><table width="864" height="501" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14"> <img src="images/janiechop1_01.gif" width="864" height="136" alt=""></td>
</tr>
<tr>
<td rowspan="3"> <img src="images/janiechop1_02.gif" width="332" height="63" alt=""></td>
<td> <a href="news.htm" target="content"><img src="images/janiechop1_03.gif" alt="" width="56" height="28" border="0"></a></td>
<td colspan="2"> <img src="images/janiechop1_04.gif" width="33" height="28" alt=""></td>
<td colspan="2"> <a href="music.htm" target="content"><img src="images/janiechop1_05.gif" alt="" width="63" height="28" border="0"></a></td>
<td> <img src="images/janiechop1_06.gif" width="32" height="28" alt=""></td>
<td> <a href="biog.htm" target="content"><img src="images/janiechop1_07.gif" alt="" width="46" height="28" border="0"></a></td>
<td colspan="2"> <img src="images/janiechop1_08.gif" width="36" height="28" alt=""></td>
<td> <a href="gigs.htm" target="content"><img src="images/janiechop1_09.gif" alt="" width="45" height="28" border="0"></a></td>
<td> <img src="images/janiechop1_10.gif" width="37" height="28" alt=""></td>
<td> <a href="gallery.htm" target="content"><img src="images/janiechop1_11.gif" alt="" width="85" height="28" border="0"></a></td>
<td rowspan="3"> <img src="images/janiechop1_12.gif" width="99" height="63" alt=""></td>
</tr>
<tr>
<td colspan="2"> <a href="forum.htm" target="content"><img src="images/janiechop1_13.gif" alt="" width="68" height="28" border="0"></a></td>
<td colspan="2"> <img src="images/janiechop1_14.gif" width="32" height="28" alt=""></td>
<td colspan="4"> <a href="merch.htm" target="content"><img src="images/janiechop1_15.gif" alt="" width="144" height="28" border="0"></a></td>
<td> <img src="images/janiechop1_16.gif" width="22" height="28" alt=""></td>
<td colspan="3"> <a href="sas.htm" target="content"><img src="images/janiechop1_17.gif" alt="" width="167" height="28" border="0"></a></td>
</tr>
<tr>
<td colspan="12"> <img src="images/janiechop1_18.gif" width="433" height="7" alt=""></td>
</tr>
<tr>
<td> <img src="images/janiechop1_19.gif" width="332" height="259" alt=""></td>
<td width="433" height="259" colspan="12">
<iframe src="welcome.htm" width="433" height="259" frameborder="0" name="content" scrolling="auto"></iframe></td>
<td> <img src="images/janiechop1_21.gif" width="99" height="259" alt=""></td>
</tr>
<tr>
<td width="864" height="42" colspan="14"> </td>
</tr>
<tr>
<td> <img src="images/spacer.gif" width="332" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="56" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="32" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="22" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="45" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="85" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="99" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
