Прозрачный счетчик на сайте

Большинство активных интернетчиков видели прозрачные баннеры и счетчики статистики на различных интернет форумах, блогах и сайтах, счетчики которые при наведении курсора мышки становились обычными:

Прозрачный счетчик на сайте

Есть много вариантов как это можно сделать, рассмотрим только два самых простых примера:

1. Откройте файл стилей, style.css и добавь код:

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

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

Далее откройте файл в котором прописаны счетчики (или баннеры), например index.php или index.html или page.php и обрамляйте картинки (счетчики, Баннер) в теги:

<div id="counters">тут счетчики или Баннеры </div>

2. Откройте нужную страницу например index.php со счетчиками и добавьте:

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

Далее найдите счетчики и обрамите их так же как и в первом варианте:

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

Посмотреть как работает этот эффект можно внизу сайта.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *