FRNET.NAROD.RU » Статьи » Имитация ссылок

Автор: Алексей Голубев

Сайт: 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):

Home

2. Переход на заданную страницу.

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

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

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

Home

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="Готово";

которая, будет возвращать начальное значение строки.

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

Home

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

P.S. Вы можете скачать пример, разобранный в статье.