22 окт. 2010 г.

Эффект перекатывания картинки-ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Эффект перекатывания</title>
<style type="text/css">
A.rollover {
 background: url('3.jpg'); /* Путь к файлу с исходным рисунком */
 display: block; /* Рисунок как блочный элемент */
 width: 151px; /* Ширина рисунка в пикселах */
 height: 40px; /* Высота рисунка */
}

A.rollover:hover {
 background-position:
  0 /* Смещение по горизонтали */
  -40px; /* Смещение вверх по вертикали */
}
</style>
</head>
<body>
<p><a href="link.html" class="rollover"></a></p>
</body>
</html>