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

Poor Best

Rating:

/ 18

September 28, 2004

TABLE OF CONTENTS:

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>

Next: Putting it all Together >>