Создание Rollover Image с использованием CSS

Рассмотрим очень популярную "фишку" в WEB 2.0 - Rollover Image. Для этого мы не будем использовать JavaScript, а воспользуетмся стилями. Суть в том, что при наведении мышкой на одну картинку, вместо нее появляется вторая. С помощью Rollover Image часто реализуют "подсвечивание" кнопок при наведении.
Итак, для этого нам понадобится всего лишь базовые знания CSS и HTML. Для начала приведу примиер кода CSS:

a.roll
{ 
 display:block; 
 width:ширина рисунка; 
 height:высота рисунка; 
 background:#fff url(путь к базовому рисунку) no-repeat; 
 overflow:hidden; 
 cursor:link; 
} 
a.roll img
{ 
 visibility:hidden; 
} 
a.roll:hover
{ 
 background:0; 
} 
a.roll:hover img
{ 
 visibility:visible; 
 border:0; 
}

Файл с нужным стилем создан, (сохраним его например под именем "style.css"), теперь осталось использовать его на наших страницах.
В общем виде использование выглядит так:

<a href="http://devoid.com.ua" class="roll">
<img src="ссылка на рисунок который будет подгружаться"
alt="" width="ширина" height="высота" border="0" />
</a>

На последок покажу рабочий пример:

<html>
<head>
<title>Rollover Image с использованием CSS</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

<a href="http://devoid.com.ua" class="roll">
<img src="button.png" alt="" width="32" height="32" border="0" />
</a>

</body>
</html>

Такой несложный код позволяет сделать дизайн вашего сайта лучше, стильнее и разнообразнее.