Навигация
Главная
Поиск
Форум
FAQ's
Ссылки
Карта сайта
Чат программистов

Статьи
-Delphi
-C/C++
-Turbo Pascal
-Assembler
-Java/JS
-PHP
-Perl
-DHTML
-Prolog
-GPSS
-Сайтостроительство
-CMS: PHP Fusion
-Инвестирование

Файлы
-Для программистов
-Компонеты для Delphi
-Исходники на Delphi
-Исходники на C/C++
-Книги по Delphi
-Книги по С/С++
-Книги по JAVA/JS
-Книги по Basic/VB/.NET
-Книги по PHP/MySQL
-Книги по Assembler
-PHP Fusion MOD'ы
-by Kest
Professional Download System
Реклама
Услуги

Автоматическое добавление статей на сайты на Wordpress, Joomla, DLE
Заказать продвижение сайта
Программа для рисования блок-схем
Инженерный калькулятор онлайн
Таблица сложения онлайн
Популярные статьи
OpenGL и Delphi... 65535
Форум на вашем ... 65535
HACK F.A.Q 65535
Бип из системно... 65535
Гостевая книга ... 65535
Invision Power ... 65535
Содержание сайт... 65535
Организация зап... 65535
Вызов хранимых ... 65535
Программируемая... 65535
Эмулятор микроп... 65535
Подключение Mic... 65535
Создание потоко... 65535
Приложение «Про... 65535
Оператор выбора... 65535
Создание отчето... 64213
Модуль Forms 63942
Пример работы с... 61027
ТЕХНОЛОГИИ ДОСТ... 60812
Имитационное мо... 56343
Реклама
Сейчас на сайте
Гостей: 5
На сайте нет зарегистрированных пользователей

Пользователей: 13,080
новичок: setan
Новости
Реклама
Выполняем курсовые и лабораторные по разным языкам программирования
Подробнее - курсовые и лабораторные на заказ
Delphi, Turbo Pascal, Assembler, C, C++, C#, Visual Basic, Java, GPSS, Prolog, 3D MAX, Компас 3D
Заказать программу для Windows Mobile, Symbian

Моделирование процесса передачи данных по магистрали с основным и резерв...
Принадлежит ли точка пересечению двух окружностей на Turbo Pascal + Отче...
Моделирование регулировочного участка цеха на GPSS + Пояснительная записка

Реклама



Подписывайся на YouTube канал о программировании, что бы не пропустить новые видео!

ПОДПИСЫВАЙСЯ на канал о программировании
Кроссбраузерная подсветка счетчиков
Все мы видели счетчики, которые подсвечиваются при наведении мышки, в основном эффект достигается с помощью использования фильтров и работает только в 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 12:47:50 · 0 Комментариев · 5094 Прочтений · Для печати

• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •


Комментарии
Нет комментариев.
Добавить комментарий
Имя:



smiley smiley smiley smiley smiley smiley smiley smiley smiley
Запретить смайлики в комментариях

Введите проверочный код:* =
Рейтинги
Рейтинг доступен только для пользователей.

Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.

Нет данных для оценки.
Гость
Имя

Пароль



Вы не зарегистрированны?
Нажмите здесь для регистрации.

Забыли пароль?
Запросите новый здесь.
Поделиться ссылкой
Фолловь меня в Твиттере! • Смотрите канал о путешествияхКак приготовить мидии в тайланде?
Загрузки
Новые загрузки
iChat v.7.0 Final...
iComm v.6.1 - выв...
Visual Studio 200...
CodeGear RAD Stud...
Шаблон для новост...

Случайные загрузки
Х. М. Дейтел, П. ...
Java в примерах -...
ZipForge
Игра в крестики н...
Исправление проц...
Архив программ
RbControls
TmxOutlookBarPro
Длинный заголовок...
Delphi Быстрый Ст...
C# 2005 и платфор...
Язык программиров...
Delphi. Учимся на...
Род Стивенс. Delp...
Adapter (пример D...
Электронный магаз...
TrayComp
Система баннеро-о...
Socoban
DemoEdit [Исходни...

Топ загрузок
Приложение Клие... 100455
Delphi 7 Enterp... 86155
Converter AMR<-... 20071
GPSS World Stud... 12523
Borland C++Buil... 11612
Borland Delphi ... 8526
Turbo Pascal fo... 7035
Visual Studio 2... 4992
Калькулятор [Ис... 4744
FreeSMS v1.3.1 3539
Случайные статьи
Игровые автоматы о...
Формирование списк...
Источник данных
Передача в едином ...
Чтение структуры P...
Класс-итератор мож...
Нарушение биполярн...
Разработка приложений
Наркологическая кл...
HTPC на базе Windows
6.2. Выполнение и...
Рекомендации по ор...
Integer expression...
Сохранение рабочей...
Структуры XForms
Рис. 1.25. Ручное ...
реестр Windows 200...
Казино Вулкан Ставка
UNIX предъявляет р...
Добавление медиако...
Концентрированное ...
Модуль CRT. Раблта...
Символические ссылки
Подтверждение реги...
Изучая сложные объ...
Статистика



Друзья сайта
Программы, игры


Полезно
В какую объединенную сеть входит классовая сеть? Суммирование маршрутов Занимают ли таблицы память маршрутизатора?