Currently on a project, I have implemented two background images that cross-fade on this website: www.alexarodulfo.com. I am interested in exploring the following possibilities: 1) Achieving a more subtle fade-in effect for the images, perhaps allowing them to slowly fade onload and during overlap. 2) Making the images disappear when an accordion tab is opened from the menu, and reappear once all tabs are closed. Below is the code I am utilizing for the background image fade-in:
<style>
body{
background-repeat: no-repeat;
background-position: 200 100;}
</style>
<script type="text/javascript">
// (C) 2006 CodeLifter.com
var speed = 6000;
var crossFadeDuration = 10;
var Pic = new Array();
Pic[0] = 'images/back_2.png';
Pic[1] = 'images/back_1.png';
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++){
preLoad[i] = new Image();
preLoad[i].src = Pic[i];}
function runSlideShow(){
if (document.all){
document.body.style.filter="blendTrans(duration=crossFadeDuration)";
document.body.filters.blendTrans.Apply();
document.body.filters.blendTrans.Play();}
if (document.body){
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)}
}
</script>
</head>
<body onload="runSlideShow()"></body>
</head>
Many thanks! Sophie