Кроссбраузерная подсветка счетчиков
Все мы лицезрели счетчики, которые подсвечиваются при наведении мышки, в главном результат достигается с поддержкою применения фильтров и действует лишь в 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-images.rambler.ru/ »
top100/banner-88x31-rambler-gray2.gif"
alt="Rambler's Top100" width="88"
height="31" border="0"/>
<span></span>
</a>
</div>
<!--end of Top100 logo -->
В образцах я поменял родник изображения на banner.gif, для такого чтоб скачанные образцы действовали локально и никак не находились в зависимости от присутствия доступа к козни, к сущности вопросца это никак не владеет отношения.
Дальше нам необходимо расположить 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 и остальные обычные браузеры, то данный вариант также владеет преимущество на существование.