Simulating Roll-over Images with text links
No JavaScript or images required! The effect of a mouse-over or roll-over image can be simulated by using the "display: block;" property in the style sheet, and defining a different color scheme for the "hover" style.
Example menu:
| link 1 link 2 link 3 link 4 |
Each link has an assigned class of 'link', as defined in the style sheet.
For the built-in menu generator, use the class= 'menu' instead of 'link' and use 'menuSel' & 'a.menu:hover' in the place of 'a.link:hover' in the style sheet.The Menu HTML:
<a href="/index/tips/roll-overs" class="link">link 1</a>
<a href="/index/tips/roll-overs" class="link">link 2</a>
<a href="/index/tips/roll-overs" class="link">link 3</a>
<a href="/index/tips/roll-overs" class="link">link 4</a>
Note: when using 'display: block' in the style sheet, do not use <br />, <p> or <table> tags in the menu. With the new menu script (v0.950 and later) use the menu style options for a horizonal menu (Hh).
The Style Sheet:
a.link{
display: block;
width: 120px;
font: bold Arial Helvetica sans-serif;
background-color: #C6C3AD;
color: #9C0000;
text-decoration: none;
border: 1px solid #C6B7AE;
padding: 4px;
}
a.link:hover {
display: block;
text-decoration: underline;
background-color: #9C0000;
color: #FFFFFF;
}
Borders, separator graphics and other background colors can be added to enhance the appearance. Icons and background images can also be added in the style sheet, with no changes needed to the HTML code.
This method fails somewhat gracefully in older browsers, and is very accessible in text and mobile browsers.