|
Делаем прозрачность счетчиков, и других объектов с помощью
CSS в программе FrontPage.
Итак, у Вас есть установленный на сайте счетчик, который вы
хотите сделать прозрачным, а при наведении на него мышкой будет показываться
обычный цвет без прозрачности.
Прозрачность можно устанавливать не только счетчикам (просто это
самое распространенное), но и другим объектам.
В данном уроке я покажу, как это сделать на примере работы с
программой FrontPage, так же это можно сделать в любом
HTML редакторе.
Открываем новую страницу, или созданную раннее в программе
FrontPage, и для начала установим кнопку, как
изображение:
В открывшемся окне выбираем файл изображения
и вставляем его на страницу. Теперь делаем
гиперссылку на изображение. Например, я сделаю ссылку на файл этого урока:
увеличить
Теперь необходимо применить к этому изображению
CSS класс, а точнее к
параграфу, где установлено это изображение:
|
<p align="center" id="banners"> |
увеличить
Прописываем адрес файла CSS,
из которого будут браться параметры для отображения нашего параграфа:
Откроем файл Динамического Веб-шаблона вашего сайта (если он у
Вас есть, если нет, то в этом же файле) и сделаем
следующее:
|
<link rel="stylesheet"
type="text/css" href="http://Ваш_Сайт/style.css"
/><!-- Вместо Ваш_сайт необходимо
вписать адрес Вашего сайта --> |
На фото ниже показан пример:
увеличить
Сохраняем страницу. Теперь необходимо сделать
файл 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"
-
Впараметрах Тип Файла -
Файлы CSS.
Сохраняем файл в корневой директории
нашего сайта:
увеличить
Файл можно сохранить и в другом месте, тогда при
прописывании адреса файла CSS необходимо указать
точный адрес.
Сохраняем Динамический Веб-Шаблон, если вы его
использовали.
Загружаем все файлы на сервер и тестируем. Должно
получится что-то похожее на это:
При загрузке страницы, изображение немного
прозрачное... при наведении мышкой на него, оно становится не прозрачным.
Теперь можно таким же образом применить данный
класс к любому параграфу, или сразу таблице с объектами. Например таблице с
установленными счетчиками, или отдельно к каждому объекту. При этом, если вы
используете Динамический Веб-Шаблон, то Вам не надо будет везде прописывать
адрес к CSS файлу, а прописать его всего один раз. Все
параметры хранятся в одном CSS файле, поэтому
достаточно только применить класс к объекту.
Удачи вам!
Комментировать
урок можно здесь--->>
Автор:
MHz-Serge |
