Special Effects with DHTML Rollovers (Page 1 of 4 )
To jumpstart some ideas about image special effects using DHTML, this article will illustrate an effect called ‘Shudder’. A poetry site of mine used the effect for a poem called ‘Shudder,’ hence the name of the function. Before getting into the tutorial, go here http://unitedbands.com/devArticles/shudder.html and see a general example of the shudder effect.
Now that you know what the final outcome should look like, let’s dig into some code. As a lead-in page, two style sheet variables are defined in the head of the HTML page. These variables will eventually be assigned to DIV tags that hold the images that are used.
The #central and #behind labels describe the state of the two images. These labels can be named arbitrarily. For this example, the key variable is the z-index. The z-index describes depth on a 3-dimensional grid. The lower the z-index, the deeper the object will appear on the page. #Behind should be under #Central so #Behind’s z-index is 1 and #Central’s is 2. Now two place-holders have been set in place for the ‘Shudder’ effect.