DHTML Tutorial 3: Working with Special Effects
Creating Rollovers, Menus, Filters, and Transitions
Additional Topics
Creating Transition Effects in Netscape
Netscape does not support transition filters like Internet Explorer does. You can create transition effects by writing a JavaScript function to change the clipping rectangle around an object.
The object needs to be placed within a <div> and you must also define a width and height for the tag. For Internet Explorer and Netscape 6 and above, you must also place the object using absolute positioning. With Netscape 4, you can use relative or absolute positioning.
Then, you need to create a function that returns the height and width values of the object. Here is one possible form of the functions:
function getHeight(o) {
var object=getObject(o);
if (isNS) {
return parseInt(object.clip.height);
} else {
return parseInt(object.height);
}
}
function getWidth(o) {
var object=getObject(o);
if (isNS) {
return parseInt(object.clip.width);
} else {
return parseInt(object.width);
}
}
This code calls the getObject() function discussed in the DHTML tutorial 1, which takes the ID name of the <div> tag and creates a variable pointing to the object.
Once you have the height and width functions entered (in whatever form you choose) you can use the following function to call various wiping features.
var i=0; var h; var w; var WipeObject; var msec;
function WipeIt(o, type, time) {
h=getHeight(o);
w=getWidth(o);
WipeObject=o;
msec=time;
type=type.toLowerCase();
if (type=="wipedown") WipeDown();
if (type=="wipeup") WipeUp();
if (type=="wiperight") WipeRight();
if (type=="wipeleft") WipeLeft();
if (type=="boxout") BoxOut();
if (type=="boxin") BoxIn();
}
The WipeIt() function has three variables: o, type, and time. The o variables contains the ID name of the object that you want to apply the transition filter to. The type variable defines the type of transition (wipedown, wipeup, wiperight, wipeleft, boxout, or boxin). The time variable indicates the approximate time (in milliseconds) for the transition. The function first calls the getHeight() and getWidth() functions and stores the height and width values in the h and w variables. Note that these two variables are global variables. The function then stores the ID name of the object in the WipeObject variable, and stores the transition time in the msec variable. Finally, the value of the type variable is changed to all lowercase characters. Based on the value of the type variable the function calls one of six functions to create the transition effect.
Note that the i, h, w, WipeObject, and msec variables are all global variables. The six transition functions (below) use these variables.
function WipeDown() {
if (i<=50) {
i++;
b=h/50*i;
clipIt(WipeObject,0,w,b,0);
setTimeout("WipeDown()", msec/50);
} else {
i=0;
}
}
function WipeUp() {
if (i<=50) {
i++;
t=h-h/50*i;
clipIt(WipeObject,t,w,h,0);
setTimeout("WipeUp()", msec/50);
} else {
i=0;
}
}
function WipeRight() {
if (i<=50) {
i++;
r=w/50*i;
clipIt(WipeObject,0,r,h,0);
setTimeout("WipeRight()", msec/50);
} else {
i=0;
}
}
function WipeLeft() {
if (i<=50) {
i++;
l=w-w/50*i;
clipIt(WipeObject,0,w,h,l);
setTimeout("WipeLeft()", msec/50);
} else {
i=0;
}
}
function BoxOut() {
if (i<=50) {
i++;
t=h/2-h/100*i;
r=w/2+w/100*i;
b=h/2+h/100*i;
l=w/2-w/100*i;
clipIt(WipeObject,t,r,b,l);
setTimeout("BoxOut()", msec/50);
} else {
i=0;
}
}
function BoxIn() {
if (i<=50) {
i++;
t=h/100*i;
r=w-w/100*i;
b=h-h/100*i;
l=w/100*i;
clipIt(WipeObject,t,r,b,l);
setTimeout("BoxIn()", msec/50);
} else {
i=0;
}
}
In the following example, the clipIt() function is called (see DHTML Tutorial 1 and Tutorial 3 for a description of this function) to gradually change (in 50 discrete steps) the dimensions of the clipping region around the object. To see these functions in action, click the buttons below.
Note that if you click the Box In button, you will have to reload or refresh the Web page to bring back the Falstaff graphic found below.
Netscape 4 users: The example below does not work consistently with the Netscape 4 browser.
