The Evolution of Rollovers - WebReference Update - 020311
___________________________ Sponsors ________________________________ This newsletter sponsored by: 802.11 Planet Spring 2002 events.internet.com _____________________________________________________________________
Rollovers are seemingly everywhere. We chronicle their evolution over time in another feature story, The Evolution of Rollovers. Enjoy.
New this week on WebReference.com and the Web:
- BOOK EXCERPT: Web Menus with Beauty and Brains
- XML: SVG: Modularized and Mobile
- FEATURE: The Evolution of Rollovers (Live demo below)
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:
or for this text newsletter:
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!~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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! http://seminars.internet.com/80211/spring02/index.html
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.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4. FEATURE: The Evolution of Rollovers (Live demo below)
We chronicle the development of rollover creation techniques used on the Web over time.
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:
Low Bandwidth Rollovers
CSS2 and Image 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:
** 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 http://events.internet.com today!
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
Horizontal Link Menus
And here are the horizontal CSS2 rollovers in HTML form:
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
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 (
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
@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:http://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@example.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For contact information on sales offices worldwide visit http://www.internet.com/mediakit/salescontacts.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For details on becoming a Commerce Partner, contact David Arganbright on 1-203-662-2858 or mailto:firstname.lastname@example.org ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To learn about other free newsletters offered by internet.com or to change your subscription visit http://e-newsletters.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ internet.com's network of more than 160 Web sites is organized into 16 channels: Internet Technology http://internet.com/it E-Commerce/Marketing http://internet.com/marketing Web Developer http://internet.com/webdev Windows Internet Technology http://internet.com/win Linux/Open Source http://internet.com/linux Internet Resources http://internet.com/resources ISP Resources http://internet.com/isp Internet Lists http://internet.com/lists Download http://internet.com/downloads International http://internet.com/international Internet News http://internet.com/news Internet Investing http://internet.com/stocks ASP Resources http://internet.com/asp Wireless Internet http://internet.com/wireless Career Resources http://internet.com/careers EarthWeb http://www.earthweb.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ To find an answer - http://search.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Looking for a job? Filling an opening? - http://jobs.internet.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This newsletter is published by Jupitermedia Corp http://internet.com - The Internet & IT Network Copyright (c) 2002 Jupitermedia Corp. All rights reserved. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ For information on reprinting or linking to internet.com content: http://internet.com/corporate/permissions.html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~