Все мы видели счетчики, которые подсвечиваются при наведении мышки, в
основном эффект достигается с помощью использования фильтров и работает только в
IE. Неужели нет простого и надежного способа заставить этот эффект работать во
всех браузерах.
Первый раз когда я увидел это вопрос на форуме, я подумал об использовании
полупрозрачных png. Должен признать, что я был не прав, многие браузеры
поддерживают свойства позволяющие придать прозрачность элементам разметки.
Очень простой способ
Хочу представить вам очень простой и надежный метод, который прислал Сергей
<b>Способ №1
</b>
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.
Изменения, которые мы должны внести в код счетчика, выделены цветом, как видите
немного.
Разрыв строки обозначен символом »
<b>Способ №2</b>
<!--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 -->
Дальше нам нужно разместить span над изображением счетчика и в качестве фона
использовать маску, которую мы только что создали.
<b>Способ №2</b>
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 и другие нормальные браузеры, то этот
вариант тоже имеет право на существование.
Автор: Евгений, Сергей
Источник: Design For Masters
Опубликовал Kest
October 27 2008 09:47:50 ·
0 Комментариев ·
5783 Прочтений ·
• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •
Комментарии
Нет комментариев.
Добавить комментарий
Рейтинги
Рейтинг доступен только для пользователей.
Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.
Нет данных для оценки.
Гость
Вы не зарегистрированны? Нажмите здесь для регистрации.
Главная
Каталог файлов
