Заработок в сети:

Статистика:

Прозрачность счетчиков, и других объектов с помощью CSS

Оглавление:

• Написание кода CSS
• Привязка файла стилей CSS к странице
• Загрузка изображения и применение к ней стиля
• Преимущества и недостатки данного метода

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

Делать будем следующее - во время загрузки страницы, пользователь будет видеть полупрозрачное изображение. При наведении курсора мыши на изображение, оно отобразиться полностью, со всеми цветами, добавив немного стиля нашей странице.

Работать будем в программе FrontPage, но в данном уроке это не имеет значения, т.к. основная работа будет происходить с кодом страницы и элементами в ней.

Начнем с написания кода CSS файла.

Создаём новую страницу (Файл\Создать... Пустая страница)

В режиме отображения кода страницы удаляем весь автоматически созданный код.

Прописываем следующие строки кода:

/* ----////// Эффект прозрачности /////------- */ #banners a img {opacity:0.4; -moz-opacity:0.4; filter:alpha(opacity=40);} #banners a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}

Итак, сейчас разберём, что мы прописали:

"banners" - это будет название, которое мы применим к параграфу, или к блоку DIV.

"a" - указывает, на гиперссылку (т.е. применяться это будет именно к гиперссылкам)

"img" - указывает на изображение (т.е. применяться это будет именно к изображениям)

далее идут скобки с параметрами полупрозрачности, с которыми можно поиграться.

Первая стока окончена, и эти параметры будут загружаться по-умолчанию.

Далее идёт строка с параметрами, которые будут применяться при наведении курсора мыши на изображение.

Разница лишь в том, что мы добавили параметр  "a:hover", а так же изменили непрозрачность на 100 %.

Теперь остаётся сохранить документ с расширением CSS. Для этого нажимаем (Файл\Сохранить как..., и в параметре Тип Файла, выбираем CSS. Название файла укажем "style"):

Если написанное выше вам не совсем понятно (я имею ввиду описание кода), то просто возьмите, и скопируйте представленный код в чистую страницу, сохраните файл с расширением css, и переходим далее. После выполнения урока, Вы сами поймёте, что к чему.

Привязка файла стилей CSS к странице:

Давайте привяжем созданный файл CSS к новой странице.

Делается это следующим образом: необходимо прописать в "голове" страницы (до закрывающегося тега </head>) ссылку на наш файл CSS.

Открываем страницу в режиме отображения кода, находим в верхней части кода тег </head>, и прописываем следующую строку до этого тега:

<link rel="stylesheet" type="text/css" href="http://Ваш_Сайт/style.css" />

На фото ниже показан пример:

На фото видно, что код вставлен до закрывающегося тега </head> в основной шаблон сайта (файл "index.dwt"). Делаю я это, чтобы можно было использовать данный файл стилей на всех страницах сайта, прикреплённых к этому шаблону. Так же, выше этого кода вставлена ссылка на другой файл CSS, который находиться в папке "style" - он используется для построения шаблона сайта.

Переходим к загрузке изображения и применения к ней стиля CSS:

Итак, переходим к загрузке изображения, добавления гиперссылки и указания стиля для этого изображения. Я решил использовать изображения автомобиля, и ссылку на один из своих сайтов:

Код выглядит так:

увеличить

Основное, это добавление к Параграфу ID с указанием названия "banners", т.е основной код получается таким:

<p align="center" id="banners"> Здесь должно быть изображение и ссылка</p>

Сохраняем страницу, и просматриваем её с помощью браузера. Если Вы всё сделали верно, то результат должен быть таким: при загрузке страницы, файл изображения, являющийся ссылкой должен быть полу прозрачным, а при наведении на него курсора мыши - он станет полностью не прозрачным:

Если у вас не получилось, то стоит проверить указанный адрес на файл CSS в "голове" страницы. Так же, проверьте, точно ли файл является гиперссылкой.

В чем преимущество данного метода:

• Параметры стиля хранятся в одном файле, а применять их можно на разных страницах. Это общее преимущество использования файлов CSS.
• Если данный метод применять к счетчикам посещаемости (а в основном, он именно к ним применятся), то их изображения не так сильно выделяются на странице, а это иногда "очень даже в плюс".
• Данный метод можно применять не только к счетчикам, а к любым изображениям - баннерам, фотографиям, и т.д.

Но, помимо преимущества открываются недостатки:

При сканировании скорости загрузки страниц с помощью Google инструментов, было выявлено следующее:

Google "не очень любит", когда на сайте используется файл CSS с такими параметрами, и вот пример того, что было указано при диагностике одного из моих сайтов с данным кодом:

Как это повлияет на индексирование, и другие параметры вывода сайта, мне пока не известно.