Websitehelp.ru

видео

Блог Seo чайника

Главная » Статьи » Мои статьи

Как сделать фон баннер с ссылкой (кликабельный фон с картинкой)

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

Пример баннера.

  Наш фон в основном будет сделан за счёт css позиционирования. Для начала на странице, где будет ваш баннер, в <head> пропишите вашу ссылку на картинку и другие значения фона. Я к примеру сделал так.

<style>
body {
 background-image: url("адрес картинки");
 background-repeat: no-repeat;
 background-position: center top;
 margin-right: 10px;
}
</style>

  Теперь с помощью css позиционирования пропишите координаты, высоту, ширину и т.д., те места, которые будут кликабельными, и обозначьте их своими именами, я выбрал два по бокам страницы, пример снизу.

<style>
#box-link { 
 position: absolute; 
 top: 8px; 
 left: 20px; 
 width: 360px; 
 height: 1000px; 
 background-color: transparent; 
 border: 0px solid yellow; } 
 
 #box-link2 { 
 position: absolute; 
 top: 8px; 
 right: 20px; 
 width: 360px; 
 height: 1000px; 
 background-color: transparent; 
 border: 0px solid yellow; } 
</style>

 Теперь сразу после тега <body> необходимо прописать ваши ссылки баннера вот в такой вот форме, с именами мест, которые будут кликабельными, которые указали ранее в <style>, как на примере снизу.

<div class="box1">
 <a id="box-link" href="http://websitehelp.ru/" target="_blank"></a>
 </div>
 <div class="box1">
 <a id="box-link2" href="http://websitehelp.ru/" target="_blank"></a>
 </div>

  В принципе на этом всё, только в таблице вашего шаблона обязательно нужно прописать <table style=" position: relative;"> иначе основное тело, то есть таблица страницы тоже будет кликабельна.

Есть ещё вариант сделать кликабельный фон без заморочек и css позиционирования, но только кликабельность будет сверху вашего сайта. Всего лишь необходимо прописать код с вашей ссылкой после тэга <body> вот этот код:

<a target="_blank" href="ваша ссылка">
<div style="height:220px;" align="center" align="center"></div>
</a>



Источник: Как поставить кликабельные фоны или баннеры заднего плана, в общем задний фон в виде картинки с ссылкой.
Категория: Мои статьи | Добавил: Green (23.07.2014)
Просмотров: 8360 | Теги: CSS, Фон, html | Рейтинг: 5.0/5, голосов: 2
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Статистика

Партнёры

Forex