Hot Tracking without JavaScript

UI Tips

Hot Tracking without JavaScript

By Andrew Flick and Anthony Lombardo

One of quickest ways to enhance the look and feel of apage is to add hot tracking to elements. Hot tracking is usually used to alterthe appearance of an item as the mouse is moved across it. Although it soundslike this would require complex JavaScript mouse event handlers, in actualitywe can provide this behavior without writing a single line of JavaScript.

The trick is to use CSS; specifically, pseudo classes. Apseudo class is a CSS class that is automatically applied in certain states. Pseudoclasses can be defined for link, hover, active, and visited states. ThoughFireFox and Internet Explorer 7.0 support pseudo classes on all elements,earlier versions of Internet Explorer will only provide this functionality foranchor tags.

The table below lists the pseudo classes, and what theycontrol:

The syntax to define a pseudo class is pretty simply, andrequires separating the selector from the pseudo class with a semicolon. Usingan anchor tag selector, the class stubs are shown below:

a:link { } /* unvisited */

a:visited { } /* visited*/

a:hover { } /* hottrack */

a:active { } /*selected */

It is important to note that the order in which theclasses are defined is extremely important. The hover pseudo class must comeafter the link pseudo class, and active must follow hover. This is importantsince the order of the classes defines their specificity. Defining the linkclass after the hover class would result in a static appearance as the linkclass would always override the hover.

Using the class stubs above, simply fill in your styleinformation and you re ready to go. One visual effect commonly used is to boldtext as you hover over an element. This can be done by adding font-weight:bold to the hover class. Now as you hover over any anchortag on the page, the font will be bolded.

Here s a tip that will prevent you from banging your headagainst the wall: Ensure that you have an href set forthe anchor tag. Internet Explorer will not apply pseudo classes to anchors thatdo not have hrefs. So if you re simply using the anchor tag to provide hottracking and are not interested in using the element for navigation, set thehref to # . By setting the href to a section on the page, you can keep thebrowser from posting back while still ensuring that the pseudo classes areapplied correctly.

If you want to provide an enhanced experience for capablebrowsers, extend the pseudo class functionality to divs and other elements. Eventhough this functionality is only available on a limited set of browsers atthis point, quick adoption of Internet Explorer 7 should change the numberssignificantly.

Andrew Flick isProduct Manager - NetAdvantage Windows Forms Technologies & TestAdvantagefor Infragistics, Inc. Prior to joining Infragistics, Andrew played an avidrole in presenting on emerging .NET technologies throughout the Midwest to avariety of User Groups as well as numerous Student Groups. As an active memberof the INETA Academic Committee, Andrew has authored content on buildingsuccessful User Groups, as well as numerous white papers on building aneffective community. A Microsoft MVP, Andrew joined Infragistics in July of2004 as a Technology Evangelist, where he was responsible for the creation ofreference applications and authoring .NET technology articles for industryleading publications, as well as the world wide delivery of Infragistics Technology demonstrations. Andrew currently serves as Infragistics ProductManager for NetAdvantage Windows Forms Technologies & TestAdvantage. Asproduct manager, he spearheads the product management and strategies ofInfragistics Windows Forms Product Lines from establishing the directionthrough delivery. Working directly with the Director of Development, he setsthe direction, plans, and manages product development. Contact Andrew at mailto:[email protected].

Anthony Lombardo isProduct Manager of NetAdvantage - ASP.NET Technologies for Infragistics, Inc.,and is responsible for spearheading product management and strategies forInfragistics ASP.NET product line, working directly with the Director ofEngineering to set the direction, plan, and manage product development. Priorto joining Infragistics, Anthony served as a Network Administrator for North Brunswick Board of Education and worked for Rutgers University in their technicalsupport division. Since beginning his career with Infragistics in 2000, Anthonyhas been involved with every aspect of the development cycle, including playinga key role in the creation of the Presentation Layer Framework for ASP.NET,assisting in the creation and implementation of Infragistics Visual Studio 2005project plan, and determining the product feature set for NetAdvantage 2005 forVisual Studio 2005. Contact Anthony at mailto:[email protected].