Special Effects with DHTML Rollovers - Enter the JavaScript
(Page 2 of 4 )
Next some JavaScript is needed before getting to the body of the HTML document. Since naming conventions are different in Internet Explorer and Netscape when working with JavaScript, a short function is called that determines the type of browser being used. The browser sniff function is used in tandem with another function called standardize which standardizes the way style sheet objects are called with Internet Explorer and Netscape Navigator. The HTML Guru (http://htmlguru.com) provided these functions and both remain useful after six years of using them.
function browser_Sniff() {
//Determines which browser and version is being used
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla')!=-1) &&
((agent.indexOf('spoofer')==-1) &&
(agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3));
this.ns3 = (this.ns && (this.major == 3));
this.ns4b = (this.ns && (this.minor < 4.04));
this.ns4 = (this.ns && (this.major >= 4));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major == 2));
this.ie4 = (this.ie && (this.major >= 4));
this.op3 = (agent.indexOf("opera") != -1);
this.win = (agent.indexOf("win")!=-1);
this.mac = (agent.indexOf("mac")!=-1);
this.unix = (agent.indexOf("x11")!=-1);
}
Now we call the function.
var is = new browser_Sniff(); // Calls Browser sniffing function
function standardize() {
// Once browser has been sniffed
// these conditionals set Netscape and Microsoft syntax
// to the same variable, so that only one function need be written
if(is.ns4) {
doc = "document";
sty = "";
htm = ".document"; }
else if(is.ie4) {
doc = "document.all";
sty = ".style";
htm = "";
}
For simplicity sake, assign variables to the style sheet objects that were defined in the beginning. Doing this will save a lot of typing. The Load_Name() function will accomplish that task.
// Sets variables for image manipulation
function Load_Name() { //Creates layer objects
Centralobj = eval(doc + '["Central"]' + sty);
Behindobj = eval(doc + '["Behind"]' + sty);
}
One more function is required before getting to the actual Shudder function. The Position function places all of the images in the correct location and makes them visible. It finds the available height and width of the page and divides that by 2 to get the center point. If the images were placed on this point, the top-left corner of the images would be in the center point of the screen. Since the image should be centered, pixels are subtracted from the left and top positions to place the images center near the actual center of the screen. Once the images are placed, they are turned to a visible state.
function Position() {
Centralobj.left = (available_width / 2) - 211;
Centralobj.top = (available_height / 2) - 143;
Centralobj.visibility = 'visible';
Behindobj.left = (available_width / 2) - 211;
Behindobj.top = (available_height / 2) - 143;
Behindobj.visibility = 'visible';
}
Next: The Main Effect and Implementation >>
More JavaScript Articles
More By Ian Felton
