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

Пятница, 04 Июн 2010 11:46
Posted in category Верстка
2 комментария

Многие наверно видели прозрачные счетчики которые при наведении курсора становились обычными…Так вот речь пойдет как раз о том как этого эффекта добится, причем мы не будем использовать ***.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
<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 -->

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

Открываем нужную страницу(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
<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 -->

Посмотреть как это работает и выглядит можно на этом сайте.
Вы можете оставить отзыв или трекбек со своего сайта.
Теги: , ,

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

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

    02 мая 2011 в 16:58

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

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

    06 Сен 2011 в 12:46

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

Ваш отзыв

«
»