20:11
ОбновитьСмайлыУправление мини-чатом
Вы вошли как Гость | Группа "Гости" | RSS

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Эффект прозрачности баннеров и счетчиков
Админ3Дата: Среда, 10.11.2010, 20:21 | Сообщение # 1
Сержант
Группа: Администраторы
Сообщений: 5
[ ]
Offline
Эффект прозрачности баннеров и счетчиков

Многие наверно видели прозрачные счетчики которые при наведении курсора становились обычными...Так вот речь пойдет как раз о том как этого эффекта добится, причем мы не будем использовать ***.js , только файл стилей (***.css) вашего сайта.
Есть много вариантов как этого добится, но мы рассмотрим только два самых оптимальных

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Итак, первый вариант:

Открываем файл стилей сайта, например style.css и в самый конец добавляем следующий код:

Code

#banners a img
{
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}

#banners a:hover img
{
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}

далее открываем файл в котором прописаны баннеры, например index.php или index.html или еще как то (черт его знает как он у вас называется)

И заключаем вашу картинку (банер, счетчик) в теги

Code

<div id="banners">тут картинки , банеры</div>

Например у меня выглядит это примерно так:

Code

<div id="banners">

<!--SpyLOG-->
<span id="spylog2042332"></span><script type="text/javascript"> var spylog = { counter: 2042332, next: spylog , track_links: "all" }; document.write(unescape("%3Cscript%20src=%22http" +
(("https:" == document.location.protocol) ? "s" : "") +
"://counter.spylog.com/cnt.js%22%20defer=%22defer%22%3E%3C/script%3E")); </script>
<!--SpyLOG-->

</div>

И второй вариант:

Открываем нужную страницу(index.html например) со счетчиками и ищем тег </head> , перед ним добавляем:

Code

<style type="text/css">
<!--
#banners a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}
#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
}
-->
</style>

Далее находим наши счетчики и заключаем их так же как и в первом варианте, а именно в теги

Code

<div id="banners">тут картинки , банеры</div>

Пример:

Code

<div id="banners">

<!--SpyLOG-->
<span id="spylog2042332"></span><script type="text/javascript"> var spylog = { counter: 2042332, next: spylog , track_links: "all" }; document.write(unescape("%3Cscript%20src=%22http" +
(("https:" == document.location.protocol) ? "s" : "") +
"://counter.spylog.com/cnt.js%22%20defer=%22defer%22%3E%3C/script%3E")); </script>
<!--SpyLOG-->

</div>

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

  • Страница 1 из 1
  • 1
Поиск:

Сделать бесплатный сайт с uCoz

www.owi.3dn.ru © Все права защищены! 2010-2011 Сайт оптимизирован под разрешение экрана 1280х1024 и браузеры Mozila Firefox
Загрузка...