A reactive image (rollover) without javascript

A reactive image is an image (menu, button, photo) which changes when hovered onto with the user's mouse. Most of the time, Webmasters use javascript (onmouseover) to create this effect. The code is sometimes quite heavy, especially when it is generated with softwares, and it is also inaccessible: javascript is not activated for about 10% of internet users (source : W3Schools).

We will proceed differently without using tricks. (View result here)

Generally, a reactive image is used as a link, often in a menu to get to other pages within the website

We will consider the reactive image as a link. We will use only the <a> tag to manage the different results of the iamge when it is hovered onto.

Thanks to CSS style sheets, we will only have a few lines to write to create this reactive image effect.

 

CSS code:
a.image { /* definition of the "image" class in the <a> tag */
     display: block; /* a tag must be a block */
     width: 100px; /* width of reactive image */
     height: 100px; /* height of reactive image */
     background-image: url(image1.gif); /* source for start image */
     background-repeat: no-repeat;
     }
	 
a.image:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(image2.gif); /* source for target image */
     }

And that's it for the CSS code!

You'll only need to place your <a> tag where you want to see the reactive image. 

<a class="image" href="lien.htm"></a>

And it works!

Other methods with integrated preloading

This method is very simple but it has an inconvenient: the image that appears when hovering is loaded at the same time and sometimes, depending on its weight, the effect is not immediate.

To go around that, there is a method that places both images one on top of the other (the second one behind the first one) when the page first loads.

Our image will be placed in a container block, named #link.

CSS code:
#link {	/* "link" will be our container, here div tag */
position:absolute;	/* place for link-image: adapt to your needs */
left: 200px;	/* image dimensions, adapt to your needs */
top: 50px;
width: 100px;
height: 100px;
background: url(image2.gif) top left no-repeat;	/* place of second image in the background */
}

#lien a {	/* definition of link that will take all of container's space */
display: block;
width: 100%;
height: 100%;
background: white url(image1.gif) top left no-repeat;	/* place of first image in foreground */
color: #000;
}

#lien a:hover {	/* first image being masked when hovered onto */
background: transparent none;
}

View result here

Print article

Raphaël GOETTER
www.alsacreations.com