Кроссбраузерная подсветка счетчиков

Дата: 16 июня, 2008 г.

- Просмотров: 119

- Раздел: Вебмастеру

Все мы видели счетчики, которые подсвечиваются при наведении мышки, в основном эффект достигается с помощью использования фильтров и работает только в IE. Неужели нет простого и надежного способа заставить этот эффект работать во всех браузерах.

Первый раз когда я увидел это вопрос на форуме, я подумал об использовании полупрозрачных png. Должен признать, что я был не прав, многие браузеры поддерживают свойства позволяющие придать прозрачность элементам разметки.

Очень простой способ

Хочу представить вам очень простой и надежный метод, который прислал Сергей

a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +,
Safari 1.2+, Opera 9 */
filter: alpha(opacity=60); /* IE 5.5+*/
}

Самый простой вариант. Выглядит одинаково в IE, Opera, FireFox.

Для тех у кого не в меру фантазия

Если вы хотите сделать со счетчиком что-то очень оригинальное можете все таки использовать полупрозрачные png.

Изменения, которые мы должны внести в код счетчика, выделены цветом, как видите немного.

Разрыв строки обозначен символом »

<!--begin of Top100 logo-->   
<div class="counter"><a href="http://top100.rambler.ru/top100/">   
<img src="http://top100-inferno.rambler.ru/%20»<br%20/>top100/banner-88x31-rambler-gray2.gif" alt="" /> alt="Rambler's Top100" width="88"  
height="31" border="0"/></a><!--end of Top100 logo -->

Дальше нам нужно разместить span над изображением счетчика и в качестве фона использовать маску, которую мы только что создали.

div.counter {
position:relative; // чтобы span позиционировался
// относительно этого элемента
width:88px;
height:31px;
}
 
.counter a { display:block; }
 
.counter a span {
position:absolute; // используем абсолютное
// позиционирование чтобы разместить
// span над изображением счетчика
top:0px;
left:0px;
width:88px;
height:31px;
display:none; // скрываем span
background:url(mask.png);
}
 
.counter a:hover span {
display:block; // показываем span
// при наведении мышки на счетчик
}
 
* html .counter a:hover span {
display:none; // IE6 не поддерживает полупрозрачные png…
}
 
* html .counter a:hover img {
filter: alpha(opacity=60); // …заменяем их фильтром
}

Более интересный эффект к сожалению в IE6 не работает, но поскольку пользователи уже начали понемногу переходить на IE7 и другие нормальные браузеры, то этот вариант тоже имеет право на существование.