July 2011
Intermediate to advanced
276 pages
5h 11m
English
Typically, it seems, the DOM markup for a slideshow is harrowing. This example will show how that markup can be made much more straightforward.
Ready our DOM with a simple, unimposing markup. To allow the page to gracefully degrade in the absence of JavaScript, place the initial image as the background of #fodaddy.
<div id="fodaddy">
<div id="fo"></div>
</div>
<style type="text/css">
#fodaddy {
width:367px;
background-image:url('08_cow_one.jpg');
}
#fo, #fodaddy {
height:318px;
}
</style>
Inject the main, viewable image behind #fo and set #fo to a zero opacity so that it is invisible, allowing the main image to be the only item seen by users. Place a new image in