Главная страница статей --> Программирование, заработок, оболочки

Имитация гиперссылок с помощью JavaScript

Источник: linuxcenter.ru

Иногда возникает необходимость замаскировать гиперссылки на сайте, например, для тех разделов, где они могут свободно добавляться посетителями, ведь кроме «белых» способов поднятия количества внешних ссылок на сайт существуют также и «черные». Ими охотно пользуются некоторые веб-мастера, занимаясь явным или завуалированным под полезные советы спамом гостевых книг, страниц комментариев к статьям и новостям, форумов, wiki-систем и вообще любых страниц, где посетитель, а не только владелец ресурса, может оставить гиперссылку.

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

Итак — они «спамят», вы «трете» — все, как говорится, при деле… Однако можно попытаться устранить саму причину и сделать ссылки в нужных разделах сайта невидимыми для поисковых систем. Это не избавит от непрошеной рекламы вообще, но несколько снизит заинтересованность «злодеев» в вашем ресурсе.

В этой статье с помощью JavaScript и CSS мы будем делать ссылки, невидимые для поисковых систем, но вполне видимые для пользователей. Код может пригодиться не только для тех разделов сайта, где нельзя быть уверенным в «объективности» ссылки от посетителя, но и для самостоятельной расстановки ссылок веб-мастером, если он не хочет поднимать ссылочную популярность других сайтов (в разумном «закручивании гаек» нет ничего плохого…).

HTML-код выглядит следующим образом:

<span class="likelink" onclick="jslink(http://microsoft.com)" onmouseover="window.status=http://microsoft.com;" onmouseout="window.status=;">Посетите сайт Microsoft</span>

Раз мы решили прятать ссылку, то тег <a> использовать не будем. Возьмем нейтральный <span>. Этот строчный элемент не имеет оформления и предназначен как раз для использования с CSS-стилями (в нашем случае class="likelink").

Далее указаны действия для событий элемента. Событие onclick срабатывает при клике мышью по содержимому <span> и запускает JavaScript функцию jslink(), передавая ей параметр — строку текста «http://microsoft.com». onmouseover активируется, если курсор мыши находится над содержимым <span>. Это событие выводит текст «http://microsoft.com» в строке состояния (status bar) браузера. onmouseout меняет текст в status bar на пустую строку, когда курсор покидает пространство, занимаемое псевдоссылкой.

Теперь о внешнем виде ссылки. Элементу <span> мы назначаем класс likelink, а собственно в CSS-коде пишем следующее:

.likelink {
text-decoration: underline;
color: blue;
cursor: pointer;
}

Итак, текст внутри <span class="likelink"> будет подчеркнутым, синий цвет лучше поменять на тот, что используется на вашем сайте для гиперссылок. Свойство cursor: pointer меняет курсор над блоком likelink со стандартного указателя-«стрелки» на «руку», которая традиционно используется при наведении мыши на ссылку.

Теперь текст внутри span выглядит для посетителя почти как гиперссылка. «Почти», потому что, во-первых, такая «ссылка» не меняет цвет после клика, во-вторых, свойство cursor: pointer; не работает в браузере Internet Explorer 5.

Последний элемент нашей незамысловатой конструкции — функция на JavaScript, открывающая новое окно браузера. Эту функцию необходимо разместить где-либо в коде страницы с тегом <script>, либо во внешнем файле:

function jslink(link)
{
window.open(link, , dependent=no, screenx=0,screeny=0, left=0,top=0, resizable=yes, scrollbars=yes, menubar=yes, location=yes, toolbar=yes, status=yes, titlebar=yes, false);
}

В качестве параметра jslink() получает адрес страницы и открывает новое окно браузера с этим адресом при помощи метода open() объекта window.

Метод open() принимает 4 параметра: url-адрес ссылки (у нас это адрес, передаваемый jslink), имя окна (в нашем случае пустое), дополнительные настройки и настройку замещения окна (false значит, что открытые окна не замещаются и при новых кликах должны открывать новые окна).

Строка с дополнительными параметрами содержит множество важных настроек внешнего вида окна браузера:

  • dependent=no означает, что созданное с помощью JavaScript окно является независимым от основного окна браузера (т.е. сайта, в котором расставлены наши псевдоссылки) и не будет закрыто после закрытия основного окна.
  • screenx=0,screeny=0,left=0,top=0 — настройка расположения «новорожденного» окна по версиям IE и Netscape. В обоих случаях мы создаем его в верхней левой части экрана.
  • resizable=yes говорит, что пользователь может изменить размер созданного JavaScriptом окна. Само собой может, ведь мы не делаем назойливый pop-up, а пытаемся сымитировать самую обычную гиперссылку.
  • scrollbars=yes,menubar=yes,location=yes,toolbar=yes,status=yes,titlebar=yes — настройки окна браузера, открывающегося по ссылке. Разрешены все элементы интерфейса «бродилки» — полосы прокрутки, меню, кнопки, строка состояния — другими словами, мы открываем полностью независимое, «самодостаточное» окно с новым сайтом в нем.

Имитация гиперссылок готова, осталось только разместить CSS и JavaScript код во внешних файлах или в теле документа. А HTML использовать по мере необходимости при верстке страниц. Если же у вас на сайте используются скрипты, нужно поменять их алгоритмы обработки текста, чтобы гиперссылки вставлялись не с помощью тега <a>, а посредством этого кода.



Похожие статьи:
- Версия сайта для печати средствами CSS
- Береги честь смолоду: прячем e-mail адреса от спама
- Выпадающее меню на CSS и JavaScript
- Валидность HTML
- Игры в ассоциации
- Обзор программ для записи и копирования компакт-дисков
- TrafficCompressor — чудеса бывают?
- Google учит русский язык
- Конверсия: маркетинг плюс контент
- Создание всплеска посещаемости сайта с помощью программы Add2Board
- Психологические тесты в сети
- Как приобретать б/у ноутбук
- Тестирование ноутбуков и настольных систем


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
Контакты
Редакция:
[0.001]