| ||
|
|
| |
| ||
| ||
| Inside Technique : Rollover Menus I am very impatient so I try to avoid the use of images on my web-site for Dynamic Effects. However, all over the web people are using images to do rollover effects that can just as easily be done with dynamic styles. You should also review the Animating Anchors Trade Secret that demonstrates a very similar concept that requires no scripting to achieve rollover effects. Move the mouse over the text in the following menu. DescriptionThe following HTML defines the menu displayed above.
<DIV ID="menu" ONMOUSEOVER="animateMenu()"
ONMOUSEOUT="animateMenu()">
<P><A HREF="/insideDHTML.asp"
TITLE="Book Information">Inside Dynamic HTML</A></Pgt;
<P><A HREF="/tips/tip.asp"
TITLE="Dynamic HTML Tips">Trade Secrets</A></Pgt;
<P><A HREF="/css/tutor2.asp"
TITLE="CSS Tutorial">CSS Online</A></Pgt;
<P><A HREF="/links/links.htm"
TITLE="Other Links">Links</A></Pgt;
<P CLASS="select">Select from the menu</Pgt;
</DIV>
Animated Menu Style SheetThe following style sheet defines the appearance of the menu and the highlight. Notice that it is simple, standard HTML that displays well on down-level browsers.
/* The style for the menu */
#menu {background: #990000; width: 16em;
margin: 5pt; font: 14pt bold arial;
text-align: left}
/* The style that surrounds each menu choice */
#menu P {border-left: 1pt black solid;
border-top: 1pt black solid;
margin-top: 2pt; margin-bottom: 10pt;
color: white; padding: 2pt}
/* The style for the "Select from the menu" string */
#menu .select {text-align: center; border: none;
color: lightgrey; font-size: 10pt;
font-family: verdana; margin-bottom: 0pt}
/* Appearance of each menu choice */
#menu P A {color: white; text-decoration: none}
/* The highlight style */
.highlight {background: black}
animateMenu() functionThis function is called by the onmouseover and onmouseout event handlers on the DIV surrounding the menu.
function animateMenu() {
var el=event.srcElement;
if ("A"==el.tagName) {
// Initialize effect if none specified
if (null==el.parentElement.effect)
el.parentElement.effect = "highlight"
// Swap effect with the class name.
temp = el.parentElement.effect;
el.parentElement.effect = el.parentElement.className;
el.parentElement.className = temp;
}
}
© 1997-2000 InsideDHTML.com, LLC. All rights reserved. |