Все мы видели счетчики, которые подсвечиваются при наведении мышки, в основном эффект достигается с помощью использования фильтров и работает только в 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 и другие нормальные браузеры, то этот вариант тоже имеет право на существование.
Loading ...
