Эффект прозрачности баннеров, изображений для Joomla

Часто на сайтах можно увидеть изображения, баннеры, счетчики рейтингов и т. п. с полупрозрачным эффектом и при наведении курсора становились обычными. Как этого добиться? В этом уроке мы разберем как это сделать…

Пример можно посмотреть на нашем сайте, счетчики посетителей:

Что нам для этого нужно? – во первых нам понадобится сторонний модуль для вставки кода, во вторых руки. Итак руки мы уже имеем, а модуль можно посмотреть здесь: Модуль PHP   -   Модуль HTML  -   Модуль Special html
Один из способов:
Находим в корне сайта следующий файл style.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);
}

Теперь, открываем наш модуль для вставки стороннего кода или файлы, в которых у вас прописаны эти баннеры, т. е. index.php, index.html и т. п.
Далее, код самого баннера, изображения и т. п. обромляем в следующее:

<div id="banners">здесь код баннера, картинки и т.п.</div>

или вот, есть еще один способ сделать это…
находим нужную страницу, например index.php, index.html и т. п., ту на которой находится наш код баннера или еще чего нибудь, или в модуле для стороннего кода и перед ним вставляем следующий код:

 

<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>

 

Далее так же как и в первом примере, обрамляем наш код:

<div id="banners">здесь код баннера, картинки</div>

Все, теперь у Вас есть эффект полупрозрачности…
Пример рейтинга «Рамблер»

 

  <meta name="robots" content="nofollow" />
 <title>Don't index this page</title>

<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>

<div id="banners"><!-- begin of Top100 code -->

здесь код счетчика рейтинга

<!-- end of Top100 logo -->
</noindex>
  </div>

… где голубой – это код «эффекта прозрачности», а красный сторонний код (в данном случае – рейтинг Рамблера), зеленым выделено noindex и nofollow для запрета индексации данного кода.