Реализацию данной задачи вы наверняка встречали на крупных порталах, так как подобный рекламный брендинг привлекает максимум внимания посетителей и является более эффективным чем обычные баннеры. Сегодня рассмотрим как сделать фон ссылкой на сайте с помощью HTML, CSS, Javascript и некоторых других «подручных средств».
Ранее в блоге уже публиковались статьи по схожей тематике, например, про большую фоновую картинку у веб-страниц или создание изображения на весь экран но все эти варианты были не кликабельные. Тем не менее, для общего развития и улучшения навыков советуем их изучить.
Кликабельная подложка для сайта через HTML и CSS
Если искать решение в интернете, то найдете несколько заметок с более простой или сложной реализацией, с интеграцией брендинга под WordPress CMS и др. Скомпоновав все эти знания и советы в один код и немного его модифицировав, получили следующий результат:
<html>
<head>
<style type="text/css">
.home { background:url('ВАШ-АДРЕС-ГРАФИКИ.jpg'); background-position:top center; background-repeat:no-repeat; background-attachment:fixed;
} #ad_bg { top: 0; left:0; position: absolute; display: inline; width: 100%; cursor: pointer; text-decoration: none;
} .main-content-block { position: relative; z-index: 1000; margin: 0pt auto; width: 900px; border: 1px solid red; background: #fff;
} </style>
</head>
<body class="home"> <a style="height:1200px;" id="ad_bg" href="http://ВАШ-САЙТ.ru" target="_blank"> </a> <div class="main-content-block"> Text </div>
</body>
</html>
|
Визуально выглядит как-то так:
Важные пояснения по примеру:
- Во-первых, вы видите, что весь код собран в одном блоке, но вы можете разделить его на 2 части: отдельно HTML, а стили вынести во второй файл (style.css).
- Тег A с адресом для перехода (href) добавляется сразу после класса body. При этом в стилях у него выключается подчеркивание, ставится обычный курсор и ширина 100%. Свойство target=»_blank» откроет линк в новом окне. Не забудьте заменить URL на нужный!
- Адрес фонового изображения задается в свойстве CSS background для класса в BODY. Обязательно(!) поменяйте адрес картинки (ВАШ-АДРЕС-ГРАФИКИ.jpg) на свое значение.
- Параметр background-attachment: fixed не обязательный, он фиксирует фоновую графику при прокрутке, если вам надо. Важно, чтобы в блоке контента задавался тип позиционирования position: relative. Дабы сохранить адаптивность предлагается добавлять DIV’у вокруг основного контента margin auto.
- Все названия классов и блоков разрешается менять на свои, главное не забывайте делать это и в HTML, и в CSS одновременно.
Высота подложки сайта
В коде вы можете видеть заданную высоту height:1200px — следовательно HTML ссылка фона будет активна только в данном диапазоне. Это пригодится, когда рекламный брендинг должен располагаться исключительно в шапке сайта, а потом через полупрозрачный переход постепенно сливаться с обычным бекграундом (по которому кликать уже не получится).
В принципе, значение height при желании легко перемещается из тега А в CSS.
Внимание! Если же вам надо сделать наоборот, чтобы абсолютно вся подложка была кликабельной, то, во-первых, удаляете опцию height из HTML, а во-вторых, для идентификатора #ad_bg в стилях используете:
#ad_bg { top: 0; left:0; display: inline; width: 100%; height: 100%; position: fixed; cursor: pointer; text-decoration: none; } |
Из новых фишек здесь: высота 100% + позиционирование блока fixed. При этом значение background-attachment для бекграунда может быть как фиксированное, так и со скроллингом.
Рандомные кликабельные фоновые картинки
Рассмотрим полезную модификацию предыдущего решения, когда нужно разместить в background несколько разных фоток, которые бы менялись случайным образом при переходах по страницам проекта. Заметьте, речь идет не о слайдшоу, а про обновление веб-страниц. Принцип реализации следующий.
В CSS-файле создаете несколько стилей с разными background:url (photo1.jpg, photo2.jpg и photo3.jpg):
.home1 { background:url('photo1.jpg'); background-position:top center; background-repeat:no-repeat; background-attachment:fixed; } .home2 { background:url('photo2.jpg'); background-position:top center; background-repeat:no-repeat; background-attachment:fixed; } .home3 { background:url('photo3.jpg'); background-position:top center; background-repeat:no-repeat; background-attachment:fixed; } |
Далее перед body добавляете скрипт случайной выборки параметров из массива:
<?php $banners[1] = array('home1','http://site1.com/'); $banners[2] = array('home2','http://site2.com/'); $banners[3] = array('home3','http://site3.com/'); $rnd = rand(1,3); ?> <body class="<?php echo $banners[$rnd][0]; ?>"> <a style="height:1200px;" id="ad_bg" href="<?php echo $banners[$rnd][1]; ?>" target="_blank"> </a> <div class="main-content-block"> Text </div> </body> |
Суть следующая: каждый раз при генерации страницы выбирается рандомное число от 1 до 3х, а затем оно подставляются в код и указывает порядковый номер ячейки массива.
Здесь важно:
- задать в переменной banners линки, куда пользователь будет переходить при клике на фоновое изображение (вместо site1, site2 и site3);
- укажите правильные адреса картинок в background:url;
- не забудьте скопировать остальную часть стилей из прошлого примера (#ad_bg, .main-content-block);
- меняйте значение высоты подложки height:1200px, если потребуется.
Внимание! Учитывая наличие PHP функций, работать данная конструкция будет только для исполняемых файлов с расширением .php (в стандартной .html странице не запустится).
Кликабельный фон сайта с ссылкой через Javascript
Если по каким-то причинам первый способ решения задачи вам не подошел, то есть парочка на JS. Следует заметить, что в примерах ниже используются совсем другое оформление, поэтому визуальный результат тестирования у вас получится несколько иной. Однако в данном случае важным является именно Javascript, — все остальное подправите уже после его внедрения.
1. Итак, вариант1 найден здесь, он максимально компактный. Сначала добавляете HTML:
<body> <img src="http://ВАШ-САЙТ.com/НАЗВАНИЕ-КАРТИНКИ.jpg" class="ad" alt="" rel="http://ВАШ-САЙТ.com" /> <div class="contents"> <span>testing</span> </div> </body> |
Затем стили:
img{position:absolute;display:block;top:0;left:0;z-index:1;} div{position:relative;z-index:1000;} span{color:#f00;} |
Ну, и дальше сам скрипт. Можете сделать из него отдельный JS-файл либо прописать сразу в body:
<body> <script type="text/javascript"> $("img.ad").click(function(e){ window.location = $(this).attr("rel"); }); </script> </body>
|
2. Исходник второго решения, к сожалению, не сохранился, остался лишь код:
<html>
<head>
<style type="text/css">
.ad-banner-image {
position: absolute;
display: block;
left: 0pt;
z-index: 1;
width: 100%;
height: 1252px;
background: url('ВАШ-АДРЕС-ГРАФИКИ.jpg') no-repeat scroll center top transparent; top: 0pt; cursor: pointer;
} .main-content-block{
position: relative;
z-index: 1000;
margin: 0pt auto;
width: 900px;
border: 1px solid red;
background: #fff;
}
</style> </head>
<body> <div class="ad-banner-image" onclick="window.open(this.href, '_self'); window.open('http://ВАШ-САЙТ.ru'); return false;"></div> <div class="main-content-block"> Text </div>
</body>
</html>
|
Здесь для события onclick был добавлено открытие нового окна с указанным URL. Его вместе с адресом подложки под сайт следует заменить на свои. Оформление также следует подправить под себя. Оба метода тестировались, и на момент написания поста все работало.
Реализация на Вордпресс и доп.нюансы
Во-первых, пару слов следует сказать про добавление ссылки на фон в одной из самых популярных CMS систем. Всю информацию по теме найдете в статье про кликабельное фоновое изображение WordPress сайта где описано 2 метода:
- через HTML/CSS — он совпадает с нашим примером в начале публикации;
- с помощью соответствующих модулей.
Как оказалось, сейчас в системе нет на 100% подходящих бесплатных плагинов. Ранее в Дизайн Мании мы рассказывали о двух возможных вариантах по теме, но один из них (Background Manager) уже недоступен/удален.
Что же делать? Если у вас недостаточно навыков для написания модуля с нуля, то следует выбрать максимально подходящий по смыслу и преобразовать его под свои нужды. К сожалению, без дополнительных навыков веб-разработки просто не обойтись. Вы можете взять:
- WP-Backgrounds Lite — выполняет установку полноэкранного кликабельного фона на страницах/постах блога. Вам придется сделать так, чтобы он реализовывал функцию и для остального веб-проекта.
- Backdrop — его преимущество в задании всех параметров через Настройщик шаблона (находящийся в админке). Нужно добавить в исходник плагина еще одну опцию и подправить вывод результирующего HTML-кода.
Также советуем почитать статью о брендированной рекламной подложке — почему этот формат интересует рекламодателей, какие нюансы и вопросы возникают при его внедрении и т.п.
Если вы знаете еще какие-то варианты как сделать фон ссылкой, делитесь ими в комментариях.
