Thursday, March 15, 2007

Overrolling effect with the help of CSS

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.

  1. Two images of identical size are prepared, one for an initial kind, and the other — for his replacement at the overrolling effect.
  2. 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.
  3. 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.
  4. 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).

Image 1a Image 2b

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'); /* Way to the file with an initial image */
 display: block; /* Image as sectional element */
 width: 196px; /* Image width */
 height: 183px; /* Image height */
 border: 1px solid #000; /* Image border */
}

A.rollover:hover {
 background: url('2.gif'); /* Way to the file with a commutable image */
}
</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.

Image 2

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'); /* Way to the file with an initial image */
 display: block; /* Image as sectional element */
 width: 151px; /* Image width in pixels */
 height: 40px; /* Image height */
}

A.rollover:hover {
 background-position:
  0px /* Horisontal shift */
  -40px; /* Vertical line shift */
}
</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.

1 comment:

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards