Home arrow JavaScript arrow Page 3 - Special Effects with DHTML Rollovers
JAVASCRIPT

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
TABLE OF CONTENTS:
  1. · Special Effects with DHTML Rollovers
  2. · Enter the JavaScript
  3. · The Main Effect and Implementation
  4. · Putting it all Together

print this article
SEARCH DEVARTICLES

Special Effects with DHTML Rollovers - The Main Effect and Implementation
(Page 3 of 4 )

Now it’s time for the main effect function. Are you shuddering? If not, hopefully soon you will be. The Shudder function is actually very simple. It consists two variables, x and y which are random numbers. The final two lines move the shuddering image. The top and left position of the background image are erratically shifted within a set of bounds created with the random numbers and some logarithmic functions. The equation’s purpose is to shudder the image, but not too much.

function Shudder() {
var x = Math.random();
var y = Math.random();
Behindobj.top = (available_height / 2) - (145 * y) - (Math.cos(x *10) + (x * y));
Behindobj.left = (available_width / 2) - (100 * x) - (Math.sin(y *10) + (2 * y * ));
}

That is the bulk of the code explained in detail. All that is left is to assign the images to DIV tags within the body of the HTML page and initialize the functions in the proper order. Using the onLoad function within the BODY tag, the size of the screen is determined, the style sheet syntax is standardized and the style sheet variable names are instantiated. The two DIV tags associate the images with the style sheet variable that were defined in the very beginning. An onMouseMove command is placed within the top image so that the Shudder effect is called when appropriate.

<BODY BGCOLOR="BLACK" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLL="NO" onLoad="
if(is.ns4) {
     available_width=innerWidth;
     available_height=innerHeight;
   }
           else if(is.ie4) {
     available_width=document.body.clientWidth;
     available_height=document.body.clientHeight;
  };
standardize(); Load_Name(); setTimeout('Position()',.01);">
<DIV ID="Central"><IMG SRC="graphics/sundunes.jpg" width="422" height="286" onmousemove="Shudder()"></DIV>
<DIV ID="Behind"><IMG SRC="graphics/sundunes_b.jpg"></DIV>

</BODY>


blog comments powered by Disqus
JAVASCRIPT ARTICLES

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

Developer Shed Affiliates

 




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