HomeSay goodbye to Javascript mouseovers.
Non Javascript rollovers example.
| Home |
| About Us |
| Contact Us |
| Privacy Policy |
| Copyright |
| More Info |
The cons of Javascript mouseovers
Using images for navigation rollovers is not only time consuming but wasteful as well. Take the above table of rollovers. 1 image for every button and 1 for every mouseover, in total 12 images. Then you have all the javascript to maintain as well.
What if you want to change text on a link or you want to add a new link? That means getting your graphics software up and running and assuming you can find the original template image, you have to edit 2 graphics or create 2 new graphics for each link.
Once the images are created you then need to start editing the javascript code to add new links. Your <a href.. tags get bloated with onmouseover/onmouseout code.
That's just a few of the cons there are loads more :)
So, if not Javascript then how is it done?
Simple :) 2 images - a small style sheet and your links placed in a table.
<style type="text/css">
A.imglink{
font : bold 9pt verdana, sans-serif;
color:black;
width:130px;
height:20px;
background:white url(/path/to/off.gif) no-repeat;
text-align:center;
padding-top:2px;
display:block;
text-decoration:none;
}
A.imglink:Hover{
font : bold 9pt verdana, sans-serif;
color:red;
text-decoration:none;
background:white url(/path/to/on.gif) no-repeat;}
</style>
You have to make sure the url path points to the on and off images. You must also set the width and height of the images in the style as well.
The table and links<table border="0" cellspacing="2" cellpadding="0">
<tr><td><a href="#" class="imglink">Home</a></td></tr>
<tr><td><a href="#" class="imglink">About Us</a></td></tr>
<tr><td><a href="#" class="imglink">Contact Us</a></td></tr>
<tr><td><a href="#" class="imglink">Privacy Policy</a></td></tr>
<tr><td><a href="#" class="imglink">Copyright</a></td></tr>
<tr><td><a href="#" class="imglink">More Info</a></td></tr>
</table>
Why the links are in a table
You must build your navigation in a table. Internet Explorer and Opera will display the images correctly when not in a table. However, Mozilla doesn't. To get Mozilla to display the full width and height of the image we have to add display:block; to the style sheet. This places each button on its own line so by using a table we can have more control.
It's not really a big deal but I thought I would point out the reasons why :)
That's all there is to it
- Easy cross browser rollovers without writing 1 line of javascript :)
- Only 2 images and a small bit of css.
- No more bloated <a tags.
- Change your button style by changing only 2 images.
Why not discuss this article in our forum?
 |
]
[
]