В последнее время на многих сайтах стало модно ставить кликабельные фоны или баннеры заднего плана, в общем задний фон в виде картинки с ссылкой. И действительно таким не сложным способом можно убить двух зайцев, поставить красивую картинку и одновременно рекламировать что либо - это может быть как партнёрская программа так и реклама страниц вашего сайта, или может быть просто проданное место под рекламу баннер. В этой статье я коротко расскажу, как поставить такой баннер на ваш на сайт.
Пример баннера.
Наш фон в основном будет сделан за счёт 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>
Источник: Как поставить кликабельные фоны или баннеры заднего плана, в общем задний фон в виде картинки с ссылкой. | 