Сегодняшнее руководство будет коротким. Я хочу взяться за что-нибудь легкое, чтобы новичок в javascript мог посмотреть живой пример без шока.
Цель
Мы собираемся сделать быстрый и небольшой кусочек кода, используя jQuery, который будет конвертировать оформление всех наших рекламных ссылок на странице.
Зачем?
Некоторые вебмастера верят, что есть группа людей, которая обладает здравым смыслом, чтобы определить внешнюю ссылку и предпочтет напечатать её в строке браузера.
“Старый” путь
Есть много путей для вебмастеров, чтобы замаскировать их ссылки или сделать их очень сложными для избежания вызова другим путём. Некоторые из этих методов включают .htaccess и код на сервере.
Для достижения цели данного руководства я хочу показать некоторый код “старой школы”:
<a onmouseout="window.status=" onmouseover="window.status="></a>
return true;"> href="http://www.affiliate-url-here.com"
target="_blank">Link Text Here
Этот код создан, чтобы показать общий адрес в статус баре браузера, когда посетитель наводит свой курсор на ссылку. Поэтому за место www.website.com?aff=123 он увидит www.website.com.
Проблема
Если Вы большой любитель рекламных ссылок и с несколькими ссылками на нескольких страницах, и добавляете контент очень часто, то написание вышеприведённого кода становится утомительным. А помещение этого кода в каждую рекламную ссылку при модернизации вашего сайта станет кошмаром.
jQuery решение
Первый шаг
Мы хотим спрятать наши ссылки с помощью javascript как только возможно, поэтому мы начнем с этого:
<script src="http://flora.org.ru/wp-admin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//code goes here
});
</script>
Как только DOM будет готов запуститься, код внутри функции ready(function(){}) выполнится.
Дальше
Мы собираемся дать всем рекламным ссылкам имя класса и название. Имя класса поможет jQuery просканировать всю страницу и найти те ссылки, которые мы хотим изменить, не трогая обычные ссылки.
Имя служит двум целям: когда курсор находится над ссылкой, будет появляться подсказка с надписью www.website.com и такая же надпись будет отображаться снизу окна браузера (только в IE).
<a href="http://www.affsite.com/?id=123" title="http://www.affsite.com"></a>
class="affLink">Super Duper Product
Говорим jQuery найти ссылки с классом = “affLink”
$('a.affLink')
Добавляем событие Mouseover
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
Этот код говорит “Найди все ссылки с именем класса affLink и при наведении мышки (событие mouseover) поменяй статусную строку браузера на то, что ты нашла в title ссылки”.
Это не работает в FireFox, но работает в Internet Explorer (что на удивление использует большинство мира). В статус-баре FireFox просто отобразится ‘Done’ или не отобразится ничего. Я не тестировал это на других браузерах.
Расширяем - mouseout
jQuery позволяет нам связать несколько методов, например:
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});
Этот кусочек говорит jQuery поменять обратно статусбар на Done, когда мышка больше не находится над ссылкой.
Если изменение mouseover и mouseout слишком сложно для Вас, то ничего не случится, если Вы напишите этот код:
$('a.affLink').mouseover(function(){window.status=this.title;return true;});
$('a.affLink').mouseout(function(){window.status='Done';return true;});
Собираем в кучку
<script src="http://flora.org.ru/wp-admin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});
});
</script>
Последние мысли
Некотрые из Вас могут подумать, что этот день слишком простой. Другие могут с трудом понять суть занятия, потому что не используют рекламные ссылки.
В последующих занятиях Вы увидите, как я возьмусь за включение в сайт любого объекта, не зависимо от того, монетизируете траффик или нет.
Популярность: 61%
RSS комментариев.
29.11.2007 от 
ROM 
RSS Записей 
Поддержи сайт!
