Сайт: 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.
A:hover {color:#222222; text-decoration:underline;}
A:visited {color:#828282; text-decoration:none;}
1. Имитация вида и поведения ссылки.
На большинстве сайтов ссылки выделяются только цветом. Однако при наведении на них курсор мыши становиться похожим на руку, а текст ссылки подчеркивается. Чтобы это сделать, нам надо использовать следующие стилевые свойства: color, text-decoration, cursor. Эти свойства нам надо приписать какому-либо классу или отдельному элементу. Пусть элемент, выступающий в роли ссылки, будет иметь класс link-text, тогда объявление стиля в теге style будет иметь вид:
.link-text
{
color:#828282;
text-decoration:none;
cursor:hand;
}
Следующая стадия - это создание скрипта, который меняет внешний вид текста при наведении на него мыши. Он должен менять соответствую-щие стилевые свойства, а именно: color, text-decoration. Функция будет иметь вид:
{
color:#828282;
text-decoration:none;
cursor:hand;
}
function mouse_over(elem) {
document.all[elem].style.color="#222222";
document.all[elem].style.textDecoration="underline";
}
При использовании данной функции в качестве параметра elem нужно передавать id ссылки.
При отведении мыши от ссылки нужно вернуть все свойства на место, следующей функцией:
document.all[elem].style.color="#222222";
document.all[elem].style.textDecoration="underline";
}
function mouse_out(elem) {
document.all[elem].style.color="#828282";
document.all[elem].style.textDecoration="none";
}
Для вставки такой ссылки на страницу потребуется следующий HTML-код (для привера возьмем в качестве элемента элемент span):
document.all[elem].style.color="#828282";
document.all[elem].style.textDecoration="none";
}
<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 данного элемента. Код для вставки на страницу:
document.location.href=url;
}
<span id="home" class=link-text onMouseOver= "mouse_over('home')" onMouseOut= "mouse_out('home')" onClick="go_to('home.html')">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() (в конец, хотя это все равно) просто добавим такую строку:
document.all[elem].style.color="#222222";
document.all[elem].style.textDecoration="underline";
window.status=stext;
}
window.status="Готово";
которая, будет возвращать начальное значение строки.Итоговый код такой ссылки:
<span id="home" class=link-text onMouseOver= "mouse_over('home', 'Home')" onMouseOut= "mouse_out('home')" onClick="go_to('home.html')"> Home</span>
Данный способ вставки ссылки я вам советую использовать только в панелях навигации и в таких местах web-страницы, где изменение поведения и внешнего вида ссылки сильно повлияет на дизайн и очень важен. Во всех остальных случаях следует пользоваться обычными ссылками.P.S. Вы можете скачать пример, разобранный в статье.
