Як зробити банер кликабельним

Як зробити банер кликабельним

Незважаючи на значне зниження популярності з моменту своєї появи, банери сьогодні все ще залишаються одним з основних рекламних засобів в інтернеті. Простий банер є звичайним зображенням. Але для того, щоб він повноцінно виконував свою функцію, треба зробити його кликабельним.

 

Вам знадобиться

  • - можливість зміни розмітки web- сторінки.

Інструкція

1. Зробіть банер кликабельним шляхом його приміщення в гіперпосилання. Використайте HTML- елемент A. Додайте початковий тег <a> з атрибутом href, значення якого вказує на цільовий ресурс, а також завершальний тег </a>. Наприклад:<a href= target.html><img src= a.png /></a>Це найпростіший і найчастіше використовуваний спосіб додавання банерів в web- сторінки. Фактично зображення тут являється анкором посилання.

2. Застосуйте клієнтські карти для створення декількох активних областей-посилань на зображенні банера. У HTML- розмітку документу додайте елемент MAP з атрибутом name, що визначає ім'я карти. У MAP помістите один або декілька дочірніх елементів AREA, з атрибутами href, shape і coords, що мають коректні значення. Наприклад:<map name= bannermap>    <area href= target1.html shape= rect coords= 0,0,32,64 alt= мета 1 />    <area href= target2.html shape= circle coords= 64,32,32 alt= мета 2 />    <area href= target3.html shape= poly coords= 96,0,127,0,127,64 alt= мета 3 /></map>Елементу IMG, що визначає банер, додайте атрибут usemap, що посилається на клієнтську карту. Наприклад:<img src= image.png usemap=#bannermap />Цей метод дозволяє використати один банер для перенаправлення користувача на різні ресурси залежно від того, яка з областей була активована.

3. Використайте можливість обробки подій призначеного для користувача введення клієнтськими скриптами для ініціалізації процесу переходу до іншого ресурсу при кліці по банеру. Встановіть обробник onclick відповідному елементу документу. Це можна зробити, додавши атрибут onclick в HTML- розмітку:<img src= image.png onclick= document.location='target.html'; />або ж безпосередньо із скрипта:<img src= image.png id= ID_BANNER /><script type= text/javascript><!--function OnBannerClick (){    document.location = target.html;}document.getElementById (ID_BANNER).onclick = OnBannerClick;--></script>Подібний метод дозволяє гнучко управляти процесом перенаправлення користувача при кліці по банеру, проте не працює, коли скрипти у браузері відключені.


4. Впровадьте банер в web- сторінку за допомогою елементу INPUT типу image, що входить до складу форми для того, щоб він був кликабельним. Елемент INPUT з атрибутом type, що має значення image, визначає графічну кнопку відправки. Адреса ресурсу зображення задається атрибутом src. Наприклад:<form action= target.php method= post>    <input type= image src= image.png />    <input type= hidden value= додаткова інформація /></form>Застосування цього методу відображення банера надає великі можливості. Так, можна передати на сервер досить великий об'єм додаткових даних за допомогою hidden- полів, особливо використовуючи POST- запит для відправки форми. Можна виконати які-небудь дії з формою перед відправкою, призначивши обробник onsubmit. Зображенню кнопки допустимо призначати клієнтську карту за допомогою атрибуту usemap.

 


Надрукувати  

Схожі матеріали