Як вставити посилання в банер

Як вставити посилання в банер

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

Інструкція

  1. Якщо банер в одному з графічних форматів (gif, jpg, png, bmp), то достатньо буде помістити тег зображення всередину тега посилання.

    Спочатку сформуйте тег зображення. На мові розмітки веб-сторінок (HTML — HyperText Markup Language — «мова розмітки гіпертексту») найпростіший його варіант виглядає так:

    <img src=»banner.gif» />

    Тут в атрибуті src зазначений «відносний адресу» зображення. У цьому варіанті браузер буде вважати, що картинка лежить в тій же папці вашого сервера, де і сама сторінка в яку вставлений банер. Але краще вказати «абсолютний адресу»:

    <img src=»http://kakprosto.ru/banner.gif» />
  2. У цей тег слід додати ще кілька атрибутів. Два атрибути будуть вказувати розміри банера (висоту і ширину). Це не обов’язкові атрибути — зображення відобразиться і без них, якщо при завантаженні сторінки з сервера в браузер все пройде нормально. Але якщо картинка чому-небудь не буде завантажена, то відсутність розмірів може привести до того, що і всі інші елементи дизайну виявляться не на своїх місцях. Тег із зазначенням розмірів буде виглядати так:

    <img src=»http://kakprosto.ru/banner.gif» width=»468″ height=»60″ />
  3. За замовчуванням браузер малює синю рамку навколо картинок з посиланнями. Щоб цього уникнути слід додати в тег для баннера атрибут border з нульовим значенням:

    <img src=»http://kakprosto.ru/banner.gif» width=»468″ height=»60″ border=»0″ />
  4. Додайте і ще один атрибут (title), який буде містити текст для підказки при наведенні курсору миші на банер:

    <Img src = «http://kakprosto.ru/banner.gif» width = «468″ height = «60″ border = «0″ title = «Це банер!» />
  5. Тег зображення з найбільш важливими атрибутами ви підготували, тепер його треба помістити всередину тега посилання. Кожна гіперпосилання формується двома тегами — відкриває і закриває:

    <a href=»http://kakprosto.ru»> </ a>

    У відкриває тег поміщений атрибут href, який містить адресу для надсилання запиту. Між цими двома тегами посилання і вставте тег банера:

    <a href=»http://kakprosto.ru»> <img src = «http://kakprosto.ru/banner.gif» width = «468″ height = «60″ border = «0″ title = «Це банер!» /> </ A>

    HTML-код банера з посиланням готовий, не забудьте тільки замінити:

    - В атрибуті href: «http://kakprosto.ru» на адресу вашого посилання для баннера;

    - В атрибуті src: «http://kakprosto.ru/banner.gif» на адресу зображення для баннера;

    - В атрибуті width: «468″ на ширину вашого банера;

    - В атрибуті height: «60″ на висоту вашого банера;

    - В атрибуті title: «Це банер!» на спливаючий текст для вашого банера;
  6. Все вищеописане відносилося до банерів-картинок, але існують і банери, виконані по флеш-технології. Щоб вставити посилання в флеш-ролик стандартним способом треба мати не тільки сам банер, але і його вихідний код. До того ж, редагувати вихідний код, а потім компілювати флеш-ролик, можна тільки в спеціалізованому редакторі — звичайний текстовий редактор для цього не підходить. Однак є спосіб обійти всі ці труднощі, обмежившись редагуванням тільки HTML і CSS (Cascading Style Sheets — «каскадні таблиці стилів»). Мова CSS використовується для докладнішого (у порівнянні з HTML) опису зовнішнього вигляду елементів сторінки. З його допомогою на сторінках можна будувати досить складні багатошарові конструкції. Цим ми і скористаємося, помістивши флеш-банер в нижній шар, а над ним розмістивши шар з посиланням.

    HTML-код банера буде виглядати так:

    <div class=»linkedFlashContainer»>

     <a target=»_top» class=»flashLink» href=»http://kakprosto.ru»> </ a>

     <Object classid = «clsid: d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase = «http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab # vers …» width = «468″ height = «60″ align = «middle»>

      <param name=»movie» value=»banner.swf» />

      <param name=»wmode» value=»opaque»>

      <Embed src = «banner.swf» quality = «high» wmode = «opaque» width = «468″ height = «60″ align = «middle» allowScriptAccess = «sameDomain» type = «application / x-shockwave-flash «pluginspage =» http://www.macromedia.com/go/getflashplayer «/>

     </ Object>

    </ Div>

    Не забудьте замінити в ньому атрибути width і height (у двох місцях), ім’я банера banner.swf (у двох місцях) та адресу посилання http://kakprosto.ru (в одному місці).

    А код SCC, що відповідає цьому HTML-коду повинен бути таким:

    <style>

     div.linkedFlashContainer {position: relative; z-index: 1; border: 0px; width: 468px; height: 60px}

     a.flashLink {position: absolute; z-index: 2; width: 468px; height: 60px; background: url (spacer.gif) no-repeat;}

    </ Style>

    Тут використана прозора картинка (будь-якого розміру) з ім’ям spacer.gif. І тут теж не забудьте поміняти розміри width і height (у двох місцях).