Unobtrusive Image Rollover with Prototype Library
Image rollover is the classic effect that we all have been playing for ages. And we often use it to rollover image tabs or menus.
Although I personally prefer to use text for navigation, but at times, when wearing the designer’s hat, I just can’t resist the temptation to make the design looks perfect through images.
Image rollover started with the traditional lengthy Javascript codes that preload the rollover images, and and setting the onmouseover and onmouseout events for each of the link involved.
<script text="type/javascript">
// some javascript codes to preload images,
// rollover and rollback images
</script>
<a href="#" onmouseover="rolloverImage('about_us')"
onmouseout="rollbackImage('about_us')">
<img src="images/about_us.gif" width="100" height="25"
alt="About Us" border="0" />
</a>
Many hated to write the Javascript rollover codes, because the codes are lengthy and ugly. So, people found a new way to create the rollover effect through Cascading Style Sheet (CSS) or Flash. I’m not going to talk about flash over here. So, no Javascript involved, great!
But, writing the CSS rollover ain’t a simple task too. Instead of writing Javascript, now you have to write the CSS styles, and the normal state and the hover state.
a.about_us {
display: block;
width: 100px;
height: 50px;
background: url(images/about_us.gif) 0 0 no-repeat;
}
a.about_us:hover, a.about_us:active {
background: url(images/about_us_over.gif) 0 0 no-repeat;
}
If you have 10 links, rest assured, you will need to write a pretty long CSS. And if you need display a different image for the currently selected link.
There is also another disadvantage of using CSS Image rollover, the famous flicker effect on IE 6. So on some occasions, you may want to just use a simple unobtrusive image rollover javascript.
With Rollover, you just have to bother about creating your images, the normal state and the hover state, write your HTML codes like usual without the mouseover or mouseout event, and unobtrusively add the rollover effect through a simple javascript call. Rollover also automatically preloads the rollover images on document load.
<ul id="nav">
<li><a href="images/about_us.gif" width="100" height="50"
alt="About Us"></a></li>
....
</ul>
<script type="text/javascript">
window.onload = function() {
new Rollover('nav');
}
</script>
// or add you can add it to body onload event
<body onload="new Rollover('nav');">
No CSS involved, and with just a simple javascript call, you are done.
Add Your Comment