✔Кликабельный фон / подложка для сайта - «Верстка»

18 марта 2016 2 295 Самоучитель CSS / Вёрстка 0

Для одного проекта попросили реализовать кликабельный фон (подложку) сайта, которую вы могли встречать на крупных порталах. Такой рекламный брендинг позволяет максимально привлечь внимание посетителя и намного эффективнее баннера. В блоге уже публиковались статьи про большую фоновую картинку для сайта и создание изображения на весь экран но все эти варианты были не кликабельные. Поэтому пришлось искать новое решение в сети. Я определил 3 возможных метода решения задачи.

Кликабельный фон через CSS

Вариант кликабельной подложки с помощью CSS предлагал автор этой статьи. Там он описывает как сделать брендинг для страницы wordpress сайта, но мы возьмем лишь код фона и немного модифицируем. Итого в HTML у вас должна быть следующая конструкция:

<pre class="css" style="font-family:monospace;">>
>
>
>
="home">
вот его пример.

В данном коде есть один важный момент. Если вы указали высоту 1200 пикселей для тега ссылки А, то при прокрутке вниз линк будет становиться не активным. Это пригодится, когда фоновая картинка не фиксированная, а плавно переходит в фон. В противном случае получается, что при прокрутке на фоне пользователь видит изображение, но без ссылки. Дабы это исправить можно использовать для идентификатора #ad_bg следующий код:

#ad_bg {
	top: 0;
	left:0;
	display: inline;
	width: 100%;
height: 100%;
position: fixed;
	cursor: pointer;
	text-decoration: none;

Здесь мы добавили высоту и изменили позиционирование блока на fixed. Также нужно убрать style=”height:1200px;” из HTML кода.

Кликабельный фон через javascript

Намеки на решение кликабельной подложки через javascript нашел в двух заметках. Проблема в том, что оба варианта на практике не заработали. С отображением фона все прошло ок, а вот переходы с помощью javascript не выполнялись. В первом случае использовался такой код:

Во втором варианте у автора вообще было много ошибок по коду. В итоге вышло что-то вроде:

<pre class="css" style="font-family:monospace;">>
>
>
>
>
>
>
>
="ad-banner-image">>
="main-content-block">
Text
>
>
>

Для работы этого метода нужно было подключить jquery, но все равно никакого результата это не дало. По логике, при клике на фоновую картинку, должно срабатывать открытие нового окна, но это не происходит.

Реализовать получилось немного видоизменив вызов скрипта.

<pre class="css" style="font-family:monospace;">>
>
>
>
>
="ad-banner-image" onclick="window.open(this.href, '_self'); window.open('http://design-mania.ru'); return false;">>
="main-content-block">
Text
>
>
>

Для события onclick был добавлено открытие нового окна со ссылкой. Можно поэкспериментировать с javascript, но у меня решить задачку так и не получилось. Учитывая, что последний вариант работает, я бросил это занятие.

WordPress плагины для кликабельного фона

В процессе поиска решения кликабельного фона нашел два WordPress плагина, которые, судя по описанию, позволяют решить эту задачу.

Background Manager

В описании модуля сказано, что он показывает случайную картинку для каждого нового пользователя, а также имеет возможность сделать слайдшоу. Допускается не только загрузка картинки, но и использование простых палитр. В настройках есть много полезных опций: определение позиционирования картинки, задание фона для конкретной страницы/поста, а также добавление ссылки. Последний пункт как раз и решает нашу задачу. Подробнее о плагине можно почитать тут.

WP-Backgrounds Lite

Основная задача плагина – установка полноэкранного кликабельного изображения для фона на страницах, постах блога. Есть бесплатная (упрощенная) и продвинутая версия плагина. Опций и настроек тут достаточно много (особенно у платной версии). Если судить по описанию, то поставить ссылку на фоновую картинку с помощью данного плагина можно.

Если вы знаете еще какие-то варианты решения кликабельного фона для сайта, делитесь ими в комментариях.