Home arrow JavaScript arrow Special Effects with DHTML Rollovers

Special Effects with DHTML Rollovers

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.

Author Info:
By: Ian Felton
Rating: 3 stars3 stars3 stars3 stars3 stars / 22
September 28, 2004
  1. · Special Effects with DHTML Rollovers
  2. · Enter the JavaScript
  3. · The Main Effect and Implementation
  4. · Putting it all Together

print this article

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.

<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.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials