Создание Rollover Image с использованием CSS
Опубликовано в : 10-12-2008 | Автор : admin | В рубрике : Все для вебмастера, Мысли вслух
0
Для этого мы не будем использовать 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>
Такой несложный код позволяет сделать дизайн вашего сайта лучше, стильнее и разнообразнее.
