Overrolling effect with the help of styles
Vlad Merzhevich
Overrolling effect means change of one image to another while the mouse cursor is aimed at it. So, as soon as a cursor appears on image, it changes to another one, and when a mouse is led away aside, an image becomes former. Usually JavaScript is used for creation of an overrolling effect, but in many cases CSS is enough.
Pseudo-class hover
First lets come to understanding of how this effect is actually done. For this purpose the pseudo-class hover is used, it’s added through a colon to the desired selector. This pseudo-class determines the style of element, when mouse cursor is over it, that is exactly what we aquire. Alas, but browser of Internet Explorer versions 6 and below in this case are able to work only with references, while other browsers (in particular, Firefox and Opera) understand hover also for other elements. So for universality of the code it will be necessary to place an image into a container <A>. An image is added and changed by the stylish parameter background. The algorithm of actions is the following.
- Two images of identical size are prepared, one for an initial kind, and the other — for his replacement at the overrolling effect.
- An initial image is added as a background image to the selector of A through the stylish attribute of background with the value of url('URI'), where URI is a way to the graphic file.
- We attach a pseudo-class to the selector of A (a:hover) and once again include the parameter of background, but as a value specify a substitutional image.
- In order to make the link sizeable to image, it is necessary to convert it into a sectional element by the attribute display with the value of block, and also to set a height and width of the link.
On the img. 1 two images are shown: initial (img, 1a) and substitutional (img. 1b).
a 
b
Img. 1. Pictures for creation of the overrolling effect
It remains to collect the whole code together, as shown in an example 1. In order not to allow the link to lead to some certain file, which is needless in this case, we’ll add a «stub» as character of grate (#) to the parameter of href tag <A> .
Example 1. Use of pseudo-class of hover
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Overrolling effect</title>
<style type="text/css">
A.rollover {
background: url('1.gif');
display: block;
width: 196px;
height: 183px;
border: 1px solid #000;
}
A.rollover:hover {
background: url('2.gif');
}
</style>
</head>
<body>
<a href="#" class="rollover"> </a>
</body>
</html>
The result of the example is shown below.
The resulted method though is simple to implement, but has the certain failing. As the second image is loaded only at aiming of cursor on the link, reflection of an image takes place with some pause. For the removal of this delay we may use not two images, but only one.
Overrolling effect with one image
It seems controvercy takes place, in fact the overrolling effect is concluded in replacement of one image by another, then how can we use one image? Actually there will be two images (img. 2) kept in one graphic file.
Img.2. Picture with two images
Changing one image to another is carried out by the shift of image on a vertical line due to the use of universal attribute of background or properties of background-position, as shown in an example 2.
Example 2. Change of the image position.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Overrolling effect</title>
<style type="text/css">
A.rollover {
background: url('3.jpg');
display: block;
width: 151px;
height: 40px;
}
A.rollover:hover {
background-position:
0px
-40px;
}
</style>
</head>
<body>
<a href="link.html" class="rollover"></a>
</body>
</html>
The result of the example is shown below.
For the selector A background image is set through the parameter of background, width coincides with an image, and a height (attribute of height) is equal to the half of height of image. Originally a green inset must be viewed at large.
At aiming on the link background is displaced upwards on 40 pixels with the help of background-position property and an orange inset becomes visible.
Summary
Overrolling effect is rarely used independently, from the viewpoint that users actually do not need an image which simply changes on the other one. Therefore this effect is used for accenting of attention on the links, menu creations, underlining of insets, etc. Operating area is limited only by our fantasy and its practicability.
