Опубликовано в : 19-12-2008 | Автор : admin | В рубрике : Все для вебмастера
0
Сегодня существует много браузеров, и их список постоянно пополняется. Буквально недавно появился новый браузер от Google.
Список браузеров, на которые стоит обратить внимание при создании сайтов: Internet Explorer, Google Chrome, Mozilla Firefox, MyIE, Netscape, Opera, Safari.
Из них самые популярные среди пользователей интернета, это Internet Explorer, Firefox и Opera.
В данной статье расскажу о своем опыте работы с браузерами. Для корректного отображение сайтов, во всех трех вышеперечисленных браузерах помимо валидного кода иногда приходится использовать так называемые css-фильтры или 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>
Такой несложный код позволяет сделать дизайн вашего сайта лучше, стильнее и разнообразнее.
