Special Effects with DHTML Rollovers
(Page 1 of 4 )
It’s common knowledge that JavaScript image rollover scripts became very popular in the early days of the Internet. While some people feel rollover effects have become perhaps, cliché, there are many ways to build upon simple rollover effects using JavaScript and style sheets. For the purpose of this tutorial, we’ll focus on several effects and the basics of how to set up images for creating rollover special effects with DHTML.
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.
<STYLE TYPE="text/css">
<!--
#Central {position:absolute; left:0; top:0; width:575; height:300; z-index:2; visibility:hidden;}
#Behind {position:absolute; left:0; top:0; width:575; height:300; z-index:1; visibility:hidden;}
//-->
</STYLE>// Sets variables for image manipulation
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.
Next: Enter the JavaScript >>
More JavaScript Articles
More By Ian Felton
