Имитация ссылокОчень часто возникают случаи, когда необходимо, чтобы ссылки, по которым уже щелкнули, выглядели, как обычные, а так же при наведении на них мышью подчеркивались. Это можно сделать припомощи каскадных таб-лиц стилей 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.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() (в конец, хотя это все равно) просто добавим такую строку: 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-страницы, где изменение поведения и внешнего вида ссылки сильно повлияет на дизайн и очень важен. Во всех остальных случаях следует пользоваться обычными ссылками. Источник: frnet.narod.ru |
КОНТАКТЫ
г. Екатеринбург info@vismech.ru |
текущее: НОВОСТИ 05.12.2013 - Уход за флэш-накопителем 05.12.2013 - Компьютер самопроизвольно выключается 05.12.2013 - Почему не запускается компьютер? 27.11.2013 - Canon Legria HF R406 - Описание видеокамеры 27.11.2013 - TravelMate P645 новый лэптоп бизнес-класса от Acer |