SiteExperts.com Logo Home | Community | Developer's Paradise
User Groups | Site Tools | Site Information | Search
 Main Menu
 Resource

Rollovers 101

Categories...
Client User Group
HTML, CSS and XML
Language
JavaScript
Product
IE3, IE4, NS3, NS4
Task
Cross-Browser DHTML, Image Manipulation, Rollovers
Technology
Dynamic Style

Sponsored Links
Developer's Paradise : Inside Technique :
Rollovers 101
Submission by SiteExperts Staff

Go to the resource:
Rollovers 101

Add to Assistant

Short Description
Learn about how the rollover effect has evolved and how to add them to your site.

Long Description
Learn about how the rollover effect has evolved and how to add them to your site.

Author
Scott Isaacs
Submission URL
http://www.SiteExperts.com/tips/styles/ts29/page1.asp
Submission Date
Jul 23,1998
 

Discussion and Rate this Resource
Overall Rating: 4.6

douglasl on Apr 19, 1999 at 9:52:26 PMRating: 5

I think the original article 's coding is rather simpler than the coding posted below, instead of browsrer detection, to detect the supported object is more efficient.

Pozzetta, what happen if it's browser other than IE & NS?  " If(object){ option 1} else { option 2} work better.

We all are victims of the WAR...

 

pozzetta on Mar 19, 1999 at 6:26:36 AMRating: 4

<html><head>

<!-- my cross-browser DHTML roll-over buttons -->
<!-- styles and 'layer for nn' -->

<style type="text/css"><!--

.NavBut {
    font-family: Arial;
    font-size: 10pt;
    color: steelblue;
    text-decoration: none;
}

 #bt1 {position: relative; visibility: hidden}
-->
</style>

<!-- on/off script -->

<script language="JavaScript"><!--

var unknown = 0;
var nn = 1;
var ie = 2;
var browser = unknown;
var version = parseInt(navigator.appVersion);

if(navigator.appName) {
if(String(navigator.appName).indexOf('Microsoft Internet Explorer',0) >= 0)
  browser = ie;
else if(String(navigator.appName).indexOf('Netscape') >= 0)
  browser = nn;
}

function rollon(elName,onBgColor,onTxtColor) {
 if((browser == nn) && (version >=4)) {
  el = document.layers[elName]
  el.bgColor='lightgrey'
       }

 if((browser == ie) && (version >=4)) {
  el = document.all[elName]
  el.style.backgroundColor =onBgColor
  el.style.color = onTxtColor
  }
}

function rolloff(elName,offBgColor,offTxtColor) {
 if((browser == nn) && (version >=4)) {
  el = document.layers[elName]
  el.bgColor=offBgColor

  }
 if((browser == ie) && (version >=4)) {
  el = document.all[elName]
  el.style.backgroundColor =offBgColor
  el.style.color = offTxtColor
  }
}

// --></script>

</head>

<body>

<!-- one button in body -->

<a href="/" class="NavBut" id="bt1" target="bt1" onmouseover="rollon(this.target,'steelblue','white')" onmouseout="rolloff(this.target,'white','steelblue')" onclick="window.location=this; return false">&nbsp;Home&nbsp;</a>

</body>

<!-- turn on the buttons -->

<script language="JavaScript"><!--
   var i, el;
   if((browser == nn) && (version >=4)) {
    for (i = 0; i < document.layers.length; i++)
    {
   el = document.layers[i]
   el.visibility="show"
    }
 }

   var i;
   if((browser == ie) && (version >=4)) {
  for(i=0; i<document.all.length; i++) {
      document.all(i).style.visibility="visible"
  }
 }
// --></script>

</html>

pjc on Feb 7, 1999 at 8:48:27 AMRating: 4


To rate and comment on a resource, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.

User Name
Password

Copyright © 1997-2008 InsideDHTML.com, LLC. All rights reserved.