Home arrow JavaScript arrow Page 2 - 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 - 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';

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