На главную | Отправить SMS | Сделать стартовой | Поставить закладку |
Разделы сайта

 Главная
 Новости
 Регистрация
 Region Free Keys
 Телефония
 Железо
 Software
 Секреты Windows
 Безопасность
 Web-дизайн
 Web-мастерам
 Фото-приколы
 Хостинги
 Раскрутка сайта
 Анекдоты
 Игромания
 Фотогалерея
 Разное
 Знакомства
 Мир техники
 Флейм
 Голосования
 Музыка
 Спорт
 Кино
 Авто
 Зал суда
 Программа TB
 Форум
 Авторам статей
 Реклама на сайте

Рассылка


Подписаться на рассылку
"Все о WEB-дизайне"

Content.Mail.Ru

Реклама



Error. Page cannot be displayed. Please contact your service provider for more details. (7)




Web-дизайн

| Основы Web-технологий | Введение в Web-дизайн | Первая Web-страница | Графика web-дизайне | Специальные возможности HTML | Каскадные таблицы стилей | Полезные приемы в Web-дизайне | Обслуживание Web-сайта | Программирование на JavaScript и VBScript | Раскрутка сайта | Деньги и интернет | Партнерские программы | Web-софт | Поисковая оптимизация | Хостинг |

Имитация вида и поведения ссылки

Автор: Алексей Голубев
Сайт: http://www.frnet.narod.ru/

Очень часто возникают случаи, когда необходимо, чтобы ссылки, по которым уже щелкнули, выглядели, как обычные, а так же при наведении на них мышью подчеркивались. Это можно сделать припомощи каскадных таб-лиц стилей CSS, путем определения псевдоклассов: link, hover, active (при нажатии на ссылку мышью, его мы рассматривать не будем за ненадобностью, но принцип такой же), visited. Вот так (для краткости будем использовать, только цвет и подчеркивание):

A:link {color:#828282; text-decoration:none;}
A:hover {color:#222222; text-decoration:underline;}
A:visited {color:#828282; text-decoration:none;}

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

1. Имитация вида и поведения ссылки.

На большинстве сайтов ссылки выделяются только цветом. Однако при наведении на них курсор мыши становиться похожим на руку, а текст ссылки подчеркивается. Чтобы это сделать, нам надо использовать следующие стилевые свойства: color, text-decoration, cursor. Эти свойства нам надо приписать какому-либо классу или отдельному элементу. Пусть элемент, выступающий в роли ссылки, будет иметь класс link-text, тогда объявление стиля в теге style будет иметь вид:

.link-text
{
color:#828282;
text-decoration:none;
cursor:hand;
}

Следующая стадия - это создание скрипта, который меняет внешний вид текста при наведении на него мыши. Он должен менять соответствую-щие стилевые свойства, а именно: color, text-decoration. Функция будет иметь вид:

function mouse_over(elem) {
document.all[elem].style.color="#222222";
document.all[elem].style.textDecoration="underline";
}

При использовании данной функции в качестве параметра elem нужно передавать id ссылки. При отведении мыши от ссылки нужно вернуть все свойства на место, следующей функцией:

function mouse_out(elem) {
document.all[elem].style.color="#828282";
document.all[elem].style.textDecoration="none";
}

Для вставки такой ссылки на страницу потребуется следующий HTML-код (для привера возьмем в качестве элемента элемент span):

<span id="home" class=link-text onMouseOver= "mouse_over('home')" onMouseOut= "mouse_out('home')">Home</span>
2. Переход на заданную страницу.

Далее следует функция, которая будет загружать в браузер новую страницу. Вот код этой функции:

function go_to(url) {
document.location.href=url;
}

Здесь в качестве параметра url используется адрес страницы для перехода. Данную функцию нужно присвоить значению атрибута onClick данного элемента. Код для вставки на страницу:

<span id="home" class=link-text onMouseOver= "mouse_over('home')" onMouseOut= "mouse_out('home')" onClick="go_to('home.php')">Home</span>
3. Строка состояния.

Последнее - это изменение надписи в строке состояния. Для этого нам потребуется немного изменить функции mouse_over() и mouse_out(). В функ-цию mouse_over() добавим еще один параметр - строку, которая отображается в строке состояния браузера. Конечный код этой функции таков:

function mouse_over(elem, stext) {
document.all[elem].style.color="#222222";
document.all[elem].style.textDecoration="underline";
window.status=stext;
}

А в код функции mouse_out() (в конец, хотя это все равно) просто добавим такую строку:

window.status="Готово";
которая, будет возвращать начальное значение строки.

Итоговый код такой ссылки:

<span id="home" class=link-text onMouseOver= "mouse_over('home', 'Home')" onMouseOut= "mouse_out('home')" onClick="go_to('home.php')"> Home</span>
Данный способ вставки ссылки я вам советую использовать только в панелях навигации и в таких местах web-страницы, где изменение поведения и внешнего вида ссылки сильно повлияет на дизайн и очень важен. Во всех остальных случаях следует пользоваться обычными ссылками.

P.S. Вы можете cкачать этот пример со страницы: http://www.frnet.narod.ru/script.html.
Или задать вопрос автору и ведущему раздела alexey-golubev@mail.ru

Содержание

Обсудить в форуме...>>>>

 

Каталог

Реклама


Rambler's Top100 Rambler's Top100

© 2002-2012, DIWAXX.RU. Дизайн Freeline Studio. Хостинг http://www.mtw.ru. Вопросы, пожелания, предложения: admin@diwaxx.ru