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

Автор: content Пятница, Апрель 11th, 2008 Нет комментариев

Рубрика: Интернет

Иногда возникает необходимость замаскировать гиперссылки на сайте, например, для тех разделов, где они могут свободно добавляться посетителями, ведь кроме «белых» способов поднятия количества внешних ссылок на сайт существуют также и «черные». Ими охотно пользуются некоторые веб-мастера, занимаясь явным или завуалированным под полезные советы спамом гостевых книг, страниц комментариев к статьям и новостям, форумов, 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-стилями (в нашем случае).

Далее указаны действия для событий элемента. Событие 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> будет подчеркнутым, синий цвет лучше поменять на тот, что используется на вашем сайте для гиперссылок. Свойство 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>, а посредством этого кода.

Автор: Земсков Юрий

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты