Создание 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>
Такой несложный код позволяет сделать дизайн вашего сайта лучше, стильнее и
разнообразнее.
Источник:
http://devoid.com.ua/
Автор: Макагон Сергей
|
