The Evolution of Rollovers - WebReference Update - 020311

(((((((((((((((( WEBREFERENCE UPDATE NEWSLETTER ))))))))))))))))) March 11, 2002

___________________________ Sponsors ________________________________ This newsletter sponsored by: 802.11 Planet Spring 2002 events.internet.com _____________________________________________________________________

This week we feature an excerpt from Wendy's new book "Web Menus with Beauty and Brains." This book is a feature-length version of Wendy's earlier series of articles by the same name. Guest author Russell Bloom shows how to create dynamic charts with JavaScript and Michael talks about the advantages of SVG.

Rollovers are seemingly everywhere. We chronicle their evolution over time in another feature story, The Evolution of Rollovers. Enjoy.

https://www.webreference.com *- link to us today
https://www.webreference.com/new/ *- newsletter home

New this week on WebReference.com and the Web:

Like what you see? Get our front page e-mailed to you every business day with our HTML newsletter. Just send an e-mail to:

[email protected]

or for this text newsletter:

[email protected]

Spread the word! Feel free to send a copy of this newsletter to your friends and colleagues, and while you're at it, snap a link to WebReference.com.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. BOOK EXCERPT: Web Menus with Beauty and Brains

What began as a series of WebRef articles has blossomed into a full length text dedicated to the creation of effective Web menus. Graphics expert Wendy Peck shares with us a chapter from her new book, "Web Menus with Beauty and Brains." Congrats, Wendy!

https://www.webreference.com/graphics/books/menus/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2. FEATURE: Drawing Charts with JavaScript

Charts can add dramatic impact to your Web presentations and visually present your data in a way that words can't easily replicate. With a minimum of JavaScript knowledge, you can create charts for your pages that are both interactive and easy to update. By Russell Bloom.

https://www.webreference.com/programming/javascript/charts/

/-------------------------------------------------------------------\ Coming to the East Coast! 802.11 Planet Spring 2002 Conf. & Expo --The Only Trade Show & Expo Focused on 802.11 Business-- June 10-12 Pennsylvania Conv. Ctr., Philadelphia, PA. Whether you're an expert in 802.11 or need to quickly get up to speed and profit from it, 802.11 Planet is the premier event for this exploding industry. Sign up today to receive the latest updates on this and future 802.11 Planet events! https://seminars.internet.com/80211/spring02/index.html

\--------------------------------------------------------------adv.-/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3. EXPLORING XML: SVG: Modularized and Mobile

One size does NOT necessarily fit all; and what's needed on the desktop isn't always best for handheld devices. Fortunately, the latest SVG spec is based on modules - allowing for the creation of SVG profiles that match your specific needs. Michael Classen investigates.

https://www.webreference.com/xml/column51/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4. FEATURE: The Evolution of Rollovers (Live demo below)

Rollovers are seemingly everywhere on the Web these days. Originally created using JavaScript and multiple images, rollovers have become more sophisticated as CSS has become more popular. However you create them, rollovers give your users instant (hopefully) feedback when they hover over a link, increasing usability.

As browsers have evolved from version 3 through version 6 we've seen rollovers evolve also, albeit at a slower pace. Most improvements in rollovers use fewer images, or none at all. The newest ones use only CSS and an optional dash of JavaScript. This saves bandwidth and HTTP requests and increases accessibility.

We chronicle the development of rollover creation techniques used on the Web over time.

JavaScript Rollovers

Still popular today, JavaScript was the only way authors could create rollovers with third-generation browsers that supported JavaScript 1.1 and the images array. Conventional JavaScript-based rollovers require two images per menu item, an "on" and and "off" image. Preloading your images can decrease most delays on mouseover. Doc JavaScript's first column, circa 1997, shows how to create these, plus a nested rollover for that special touch.

https://www.webreference.com/js/column1/

Rollovers can be the basis of navigational elements like menus. In fact Wendy has written an entire book on the subject of Web menus. We're featuring an excerpt of her book here:

https://www.webreference.com/graphics/books/menus/

Wendy also shows how to create JavaScript-based rollovers in Photoshop and Fireworks at her Production Graphics site:

https://www.webreference.com/graphics/

Peter Belesis' first column shows how to create dynamic buttons with JavaScript 1.2's new onMouse* events.

https://www.webreference.com/dhtml/column1/

Text Rollovers with JavaScript

Text rollovers dynamically change a link's color and even its content using JavaScript and CSS. This technique works with version 4 browsers, but relies on JavaScript and some workarounds for Netscape 4.

https://www.webreference.com/js/column4/

Low Bandwidth Rollovers

Peter Belesis demonstrates how to create low-impact rollovers with client-side imagemaps, CSS, and JavaScript.

https://www.webreference.com/dhtml/column2/

CSS2 and Image Rollovers

You can avoid JavaScript altogether using the CSS2 :hover pseudo-class for fifth generation browsers (IE5+, Netscape 6, and Opera 5). CSS2 introduces two new pseudo-classes :hover and :focus. Combined with :link, :active, and :visited you can have complete control over how your links interact with users. Stuart Robertson and Tim Murtaugh demonstrate how to use transparent images and :hover {background...} to create low-impact CSS2-based rollovers.

https://www.designmeme.com/zeldman/
https://www.alistapart.com/stories/rollovers/

This technique halves the number of images necessary for rollovers.

Pure CSS2 Rollovers

Pure CSS2 rollovers are faster than the CSS2/transparent image method. Although they give you less control over your menu's appearance, pure CSS2 rollovers don't require the use of images, each of which requires a separate HTTP request. CSS2 rollovers use the :hover pseudo-class to toggle link styles to create pure text rollovers. We use a streamlined version in WebReference.com's style sheet:

a:hover{background:#FD3;}

You can have more control over the appearance of your links by adding more CSS rules. In fact you can make them look like image-based menus, without images! By carefully adding padding, margins, widths, and borders you can produce effective rollovers without JavaScript. Eric Meyer, author of "CSS: The Definitive Guide" demonstrates this technique here:

https://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html

/-------------------------------------------------------------------\ ** When Face-to-Face is the Only Way ** The Internet is great for exchanging information and ideas, but nothing beats in-person learning and networking. Check out internet.com's upcoming Spring 2002 conferences and expositions including: ** Search Engine Strategies ** Nanotech Planet ** 802.11 Planet (Wireless) ** Instant Messaging Planet and more. Visit https://events.internet.com today! \--------------------------------------------------------------adv.-/

Update: This works fine in IE5 and Netscape 6, but if you try Eric's method vertically, the different box models cause some problems with Netscape 6.x and Opera. On IE5+ the menus work fine and will stack seamlessly above one another. On Netscape 6 they will overlap vertically (due to the inline nature of the code).

We tried to force block-level elements using a closing </p>, <DIV></DIV>, styled <BR></BR> and even display:block <SPAN></SPAN> around our links to no avail. You can get the rollover cells to stack vertically, but there will be a gap in IE when you give Netscape 6 enough vertical margin-top and bottom. There's also the problem of variable width links due to their inline nature in Netscape 6.

As you'd expect, Eric has subsequently perfect his rollovers at his CSS Edge site.

Block Element Links

The key is to make your links block elements! Once you turn your links into block elements (not all of them, just the ones in your menu) you can set their width reliably, with some caveats for IE6. Here are the

Improved CSS2 vertical rollovers.

Horizontal Link Menus

Block-level links work great for vertical menus, but what about horizontal menus? If you make your links block level they automatically have a return after each one. The way around that is to let the link remain inline, and either give a width (works for IE5+), or leave the width off. Netscape 6 does not use the width for inline links. Here's what the code looks like:

<html> <head><title>Horizontal CSS2 Rollovers Demo</title> <style type="text/css">  </style> </head> <body> <h2>Experts</h2> <div class="links2"> <a href="/dhtml/">DHTML</a> <a href="/graphics/">Graphics</a> <a href="/js/">JavaScript</a> <a href="/xml/">XML</a> </div> </body> </html>

And here are the horizontal CSS2 rollovers in HTML form:

Experts

DHTML Graphics JavaScript XML

Note that adding a white-space:nowrap; to the outer DIV would force browsers to not wrap these styled links when users shrink their windows. With wrapping on, the margin-right:-1px; gets rid of the 2px double borders where the cells overlap, and still shows a border after wrapping. Now, let's see if we can set the width of these links in Netscape.

Horizontal Rollovers with CSS2 and Tables

By using a table, and block-level links you can force them to not stack. Here's the code:

<html> <head><title>Horizontal Rollovers with CSS2 and Tables</title> <style type="text/css">  </style> <body> <table width="100%" cellpadding="0" cellspacing="0"> <tr class="links3"> <td width="25%"><a href="/dhtml/">DHTML</a></td> <td width="25%"><a href="/graphics/">Graphics</a></td> <td width="25%"><a href="/js/">JavaScript</a></td> <td width="25%"><a style="border-right-width:1px;" href="/xml/">XML</a></td> </tr> </table> </body> </html>

Here's that same code in HTML.

Note that if we use width:100%; for the link style Netscape 6 extends the table a bit too far to the right, while IE5 centers it perfectly. Changing the width to auto fixes the problem (width:auto;).

Thanks to Dan Ragle for the block-level link idea. As this CSS2 technique does not work reliably in Netscape 4, presumably you'd use an @import rule to only apply this technique to CSS2-capable browsers.

This concludes our look at the evolution of rollovers. We now resume your regularly scheduled programming. If you know of a great rollover site, let me know.

That's it for this week, see you next time.

Andrew King Newsletter Editor, WebReference.com aking at internet dot com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ARE YOU BABYSITTING YOUR EMAIL LIST SERVER SOFTWARE? Upgrade to Lyris ListManager From The Experts at SparkLIST, Save Money, and Remove Headaches With Our Free Installation Assistance Offer:https://SparkLIST.com/solutions/software/intm/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Advertising: If you are interested in advertising in our newsletters, call Claudia at 1-203-662-2863 or send email to mailto:[email protected] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For contact information on sales offices worldwide visit https://www.internet.com/mediakit/salescontacts.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For details on becoming a Commerce Partner, contact David Arganbright on 1-203-662-2858 or mailto:[email protected] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To learn about other free newsletters offered by internet.com or to change your subscription visit https://e-newsletters.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ internet.com's network of more than 160 Web sites is organized into 16 channels: Internet Technology https://internet.com/it E-Commerce/Marketing https://internet.com/marketing Web Developer https://internet.com/webdev Windows Internet Technology https://internet.com/win Linux/Open Source https://internet.com/linux Internet Resources https://internet.com/resources ISP Resources https://internet.com/isp Internet Lists https://internet.com/lists Download https://internet.com/downloads International https://internet.com/international Internet News https://internet.com/news Internet Investing https://internet.com/stocks ASP Resources https://internet.com/asp Wireless Internet https://internet.com/wireless Career Resources https://internet.com/careers EarthWeb https://www.earthweb.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To find an answer - https://search.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Looking for a job? Filling an opening? - https://jobs.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This newsletter is published by Jupitermedia Corp https://internet.com - The Internet & IT Network Copyright (c) 2002 Jupitermedia Corp. All rights reserved. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information on reprinting or linking to internet.com content: https://internet.com/corporate/permissions.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~