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

Примеры в zip архиве