TinySigns

A comparison of CSS and Javascript image effect techniques used on hover menu brought to you through a free HTML Programming tutorial by Tiny Signs.

Ever wondered how those menu hover effects are done? There are a lot of ways to achieve the effect; there is the old way (Javascript) and the CSS way, either way, you can pull off a nice menu hover effect.

The Javascript Way of menu hover effect (Old Style)

Here is what you used to do to swap images on mouse over of an image.

<a href=”tiny-signs-tutorials.html”><img src=”img_def.png” onmouseout=”this.src=’img_def.png’;” onmouseover=”this.src=’img_ovr.png’;”></a>

How it would look like:

Two images are needed to be created (50px by 25px) namely img_def.png and img_ovr.png. Here are the images so you do not need to create one for the example (right-click then choose Save As):

img_def.png:

img_ovr.png:

Using onmouseover and onmouseout inline event handlers has been the most common way of creating those cool hover menu effects during the early days of web development. But the problem with this style is that the image cannot be reused. Imagine having 10 menu/links that would use the mouseover event handler, you have to create two images for each link you want to create a hover effect, then you need to create 20 images for the effect. Tiring? Then try the new way of rendering the same hover effect.

A CSS Way of hover effect

Now with CSS (Cascading Style Sheet), you only have to create two images for all the hover effects you want and specify a class in the markup where the effect is applied.

Here’s a sample that would do the same as the codes above, in CSS:

<style type=”text/css”>
<!–
. hovers_two_images {
font: bold 12px Tahoma;
color: #FFFFFF;
display: block;
width: 50px;
padding: 5px 0 5px 0;
text-decoration: none;
text-align: center;
background: #fff url(img_def1.png) no-repeat center center;
}

.hovers_two_images:hover {
background: #fff url(img_ovr1.png) no-repeat center center;
}
–>
</style>

<a href=”tiny-signs-tutorials.html” class=”hovers_two_images”>CSS</a>

You need to create two images (50px by 25px) namely img_def1.png and img_ovr1.png for the sample code above. Here are the images you need for the example, if you do not want to create one (right-click then choose Save As):

img_def1.png:

img_ovr1.png:

The important parts of the above code are the background property for the hover class, and using the actual class on those links. Although there are lesser codes in the “old way”, your web space would be larger since it would take 20 images to have the same effect as the CSS way of doing things, which only needs two images to render the same effects.

Which menu hover effect to choose?

I would recommend the CSS way is better than the Javascript way because of the following:

• It provides a more centralized effect; all you need to do is declare the class where the effect will be applied
• It would take smaller web space since you only need two image for all the menu for the website you are creating.
• It is a newer style of creating hover effect.

You have just learned how to create those hover effects in CSS, actually there are other ways of achieving hover effects in CSS, remember this is just an example for hover a menu item and is not a complete hovering menu, here are other ways of achieving the menu hover effect.

This is Tiny Signs’ Style, so what your style?