Few days ago i found myself at the situation when i had to do some flash-imitation by using the fading method of changing the images, but in the HTML at that specific situation i could not put 2 images at the same position. The absolute as well as the relative positioning were not applicable, thanks to the IE. I have had just an “img” and a “div” in front of me with an alternative option of using a flash animation. I have to confess, that I am not a big fan of using a lot of flash on the same page. No, don’t get me wrong, i think that flash is wonderful and it enables doing a lot of advanced design stuff, which is much harder to do in HTML, but i don’t like the pages with 6-8 small flash “plugins” making from the web page some kind of a hybrid.
I am using the javascript Scriptaculous library for the visual effects, which is quite fantastic. If you have not tried it out, then do it as soon as possible, you are going to love it =O). Already for some years, i have my own javascript library, with a lot of different functions, including the fading in-and-out method, but lately i have found extremely useful their code, as i had no worries about updating and testing it for the most important browsers available on the market.
After some thoughts i decided using the background image of the parent element (“div”) as a second image storage for an image-replacement method. Instead of the “normal” step of load the next image into the second “image” element, while fading the first one out and the second one in, i decided to try out the following sequence:
1. Assign the current image source to the “backgroundImage” attribute of the parent “div” element
2. Fade out the image element with the defined speed
3. A few moments before fading out of the image completely, load the next image into it ( at this moment the background of the parent “div” is the prevailing visual element, because the opacity of the image is near 0%)
4. A few instants after the step 3 fade in the image element, thus visualizing the next “slide”, which will appear substituting the “old slide” with a newer one
5. Repeat the steps from 1-4 after a small pause.
I had to do some adaptation for the code i have written before, so the final result was looking something like this:
var slidesNr = 4; // Total slides nr
var curSlide = 1;
var sliderSpeed = 3000; // milliseconds, time of the fading effect
var sliderChangeSpeed = 8000; // milliseconds
function changeSlide(){
document.getElementById( 'photoId' + 1 ).style.backgroundImage =
'url(' + document.getElementById( 'photoId' + 2 ).src + ')';
new Effect.Opacity( "photoId" + 2, { duration: (sliderSpeed/1000),
transition: Effect.Transitions.linear, from: 1.0, to: 0.01 } );
curSlide++;
curSlide = ( curSlide > slidesNr ) ? 1 : curSlide;
setTimeout( "document.getElementById( 'photoId' + 2 ).src =
'image_' + curSlide + '.jpg';", sliderSpeed - 200 );
setTimeout( "Effect.Appear( 'photoId' + 2 );", sliderSpeed-300 );
setTimeout( "changeSlide();", sliderChangeSpeed + sliderSpeed );
}
There are some small conditions for using this tecnic – all images have to have the same sizes and you will probably have to do some css adjustments like:
#photoId2{
width: 150px;
height: 150px;
}
#photoId1{
width: 150px;
height: 150px;
background: no-repeat left top;
}
The HTML for this experiment is very simple, and you can find it on the result page.
You can see the final result here. Its very far from being perfect, but i have found it to be acceptable for some projects.
p.s. This article is still a “beta” so any comments are more then welcomed =O)