Кликабельный фон / подложка для сайта - «Верстка»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
18-03-2016, 16:24
Кликабельный фон / подложка для сайта - «Верстка»
Рейтинг:

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


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


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



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


В данном коде есть один важный момент. Если вы указали высоту 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"<span style="color: #00AA00;">></span>>
="main-content-block"<span style="color: #00AA00;">>
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;"<span style="color: #00AA00;">></span>>
="main-content-block"<span style="color: #00AA00;">>
Text
>
>
>

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


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


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


Background Manager



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


WP-Backgrounds Lite



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


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


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

Теги: CSS Верстка, фона style=

Просмотров: 4 170
Комментариев: 0:   18-03-2016, 16:24
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle