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

Пятница, 04 Июн 2010 11:46

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

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

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

1
2
3
4
5
6
7
8
9
#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 или еще как то (черт его знает как он у вас называется)

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

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

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

1
2
3
4
5
6
<div id="banners">
<!-- begin of Top100 logo -->
<a href="http://top100.rambler.ru/home?id=2186025">
<img src="http://top100-images.rambler.ru/top100/w3.gif" border="0" alt="Rambler's Top100" width="88" height="31" /></a>
<!-- end of Top100 logo -->
</div>

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

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

1
2
3
4
5
6
7
8
9
10
<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>

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

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

Пример:

1
2
3
4
5
6
<div id="banners">
<!-- begin of Top100 logo -->
<a href="http://top100.rambler.ru/home?id=2186025">
<img src="http://top100-images.rambler.ru/top100/w3.gif" border="0" alt="Rambler's Top100" width="88" height="31" /></a>
<!-- end of Top100 logo -->
</div>

Посмотреть как это работает и выглядит можно .



Вы можете оставить отзыв или трекбек со своего сайта.

4 комментария на «Прозрачный баннер или счетчик»

  1. Ансар пишет:

    02 мая 2011 в 16:58

    Здравствуйте! Пытался сделать как показано всё получилось но, как мне добиться что бы счетчики показывались не вертикально, а горизонтально, они сразу уходят в лево от страницы. Пока всё вернул на прежнее место как было.

  2. Руслан пишет:

    06 Сен 2011 в 12:46

    Поставте скрипт не для каждого счетчика отдельно,а для группы!
     «1счетчик» «2счетчик» «3счетчик»  

  3. Алекс пишет:

    13 Сен 2012 в 18:01

    круто выглядит) спасибо

  4. Артем пишет:

    15 Июл 2016 в 22:57

    Попробовал ваш метод, все сработало!

Ваш отзыв