Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Создание эффекта mouseover при помощи CSS

Главная « Уроки Web-мастерства « Создание эффекта mouseover при помощи CSS

версия для печати

Создание текстового эффекта mouseover на основе CSS …

Хотите создать эффект mouseover без использования JavaScript? Что ж, это возможно. Эксперт по CSS Эрик Мейер (Eric Meyer) показывает, как это сделать, на своем сайте CSS/Edge.

Прием очень простой, он основан на использовании свойства display, которое скрывает текст, а затем вызывает его появление в определенном месте при наведении указателя мыши.

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Создание эффекта mouseover при помощи CSS</title>

<style type="text/css">
<!--
html {
height : 100%;
}

body {
background-color: #fff;
height : 100%;
margin : 0;
padding : 0;
font-size : 82%;
line-height : 135%;
font-family : Arial, sans-serif;
}

ul#links {
position: absolute;
top: 100px;
left: 25px;
width: 150px;
height: 300рх;
}

ul#links a {
display: block;
font-weight: bold;
text-align: center;
padding: 10px;
color: #0055ff;
border: 1px solid #000;
}

ul#links a:hover {
color: #ee0000;
}

ul#links a span {
display: none;
}

ul#links a:hover span {
display: block;
position: absolute;
top: 50px;
left: 225px;
width: 150px;
padding: 5px;
color: #fffeed;
background-color: #ed0000;
}

li {
list-style-type: none;
padding: 10px;
}
-->
</style>
</head>

<body>

<ul id="links">
   <li><a href="#">Вода<span>Прозрачная бесцветная жидкость, представляющая собой в чистом виде химическое соединение водорода и кислорода</span></a></li>
   <li><a href="#">Огонь<span>Свет от осветительных приборов. Огни фанарей. Огни города.</span></a></li>
   <li><a href="#">Ветер<span>Держать нос по ветру</span></a></li>
   <li><a href="#">Земля<span>Третья от Солнца планета, вращающаяся вокруг своей оси и вокруг Солнца</span></a></li>
</ul>

</body>
</html>
 
(рис. 1). Создание эффекта mouseover при помощи CSS.

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

Текстовый эффект mouseover, созданный при помощи CSS, хорошо работает в современных браузерах.

 

CSS-эффект mouseover для текста с изображениями …

Можно применять подобную технику замены и к изображениям. В данном случае элемент изображения помещается непосредственно в элемент anchor и, вместо использования элемента display для скрытия и отображения, необходимо установить нулевую высоту и ширину до наступления состояния :hover (наведение указателя мыши), на время которого вы включите высоту и ширину.

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>CSS-эффект mouseover с использованием изображений</title>

<style type="text/css">
<!--
html {
height : 100%;
}

body {
background-color: #fff;
height : 100%;
margin : 0;
padding : 0;
font-size : 82%;
line-height : 135%;
font-family : Arial, sans-serif;
}

ul#links {
position: absolute;
top: 100px;
left: 25px;
width: 150px;
height: 300рх;
}

ul#links a {
display: block;
font-weight: bold;
text-align: center;
padding: 10px;
color: #0055ff;
border: 1px solid #000;
}

ul#links a:hover {
color: #ee0000;
}

ul#links a img {
width: 0;
height: 0;
border-width: 0;
}

ul#links a:hover img {
position: absolute;
top: 15px;
left: 225px;
width: 259px;
height: 195px;
}

li {
list-style-type: none;
padding: 10px;
}
-->
</style>
</head>

<body>

<ul id="links">
   <li><a href="#">ФГУП «НИИСК»<img src="niisk_spb.jpg" /></a></li>
   <li><a href="#">БЧК<img src="bm_bchk.jpg" /></a></li>
   <li><a href="#">ТЕКСТИЛЬ-ОПТ<img src="textile_opt.jpg" /></a></li>
</ul>

</body>
</html>
 
(рис. 2). CSS-эффект mouseover с использованием изображений.
 

Динамические CSS-меню …

Этот прием представляет собой расширенное использование идей создания эффекта mouseover при помощи CSS, но здесь псевдокласс :hover применяется к другим элементам - на самом деле, это использование :hover допустимо, но, к сожалению, IE не поддерживает его. В результате у вас есть доступ только к основным ссылкам.

Таким образом, можете использовать этот эффект для создания отличных меню без JavaScript, но в IE они работать не будут. Кроме того, поскольку фактически вы просто оформляете списки, в браузере без CSS-поддержки, такие динамические меню будут выглядеть, как сложные списки.


внимание!

Более подробную информацию об эффекте mouseover и приемах для оформления меню, описанных здесь, вы найдете на сайте CSS/Edge Эрика Мейера. Подробное описание создания иерархических динамических меню вы можете также найти на сайте www.pixy.cz в статье: Hierarchical dynamic menu with CSS.

 
Урок № 17: | Дата: 11.05.2008 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

CSS-эффект mouseover для текста с изображениями…

Динамические CSS-меню…

 
Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Как сделать сайт максимально удобным?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

Создаем CSS-меню

Основные типы CSS-макетов

Раскрывающиеся CSS-меню

Создание многоуровневых раскрывающихся CSS-меню

CSS-методы замены текста изображениями

Прямоугольники с закругленными углами на основе CSS

CSS-методы центрирования web-страницы

CSS-эффекты наведения указателя мыши

CSS-стили для шрифтов и текста

Навигационные CSS-панели на основе списков

Свободное размещение в CSS

Таблицы для верстки - это не обязательно зло

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov