Кликабельный фон / подложка для сайта - «Верстка»
Заждались: продажи S.T.A.L.K.E.R. 2: Heart of Chornobyl за два дня после релиза превысили миллион копий - «Новости сети»
Заждались: продажи S.T.A.L.K.E.R. 2: Heart of Chornobyl за два дня после релиза превысили миллион копий - «Новости сети»
Блогер показал, как пройти Baldur’s Gate 3, не делая в бою абсолютно ничего - «Новости сети»
Блогер показал, как пройти Baldur’s Gate 3, не делая в бою абсолютно ничего - «Новости сети»
Microsoft открыла доступ к скандальной ИИ-функции Recall — пользователям разрешили ограничить её «подглядывания» - «Новости сети»
Microsoft открыла доступ к скандальной ИИ-функции Recall — пользователям разрешили ограничить её «подглядывания» - «Новости сети»
У Nvidia нашлась ахиллесова пята — треть выручки зависит от настроения трёх клиентов - «Новости сети»
У Nvidia нашлась ахиллесова пята — треть выручки зависит от настроения трёх клиентов - «Новости сети»
Представлен 80-долларовый смартфон Tecno Pop 9 — с Helio G50 и батареей на 5000 мА·ч - «Новости сети»
Представлен 80-долларовый смартфон Tecno Pop 9 — с Helio G50 и батареей на 5000 мА·ч - «Новости сети»
Первая за 11 лет новая книга Анджея Сапковского из цикла «Ведьмак» получила название «Перекрёсток воронов» — первые подробности - «Новости сети»
Первая за 11 лет новая книга Анджея Сапковского из цикла «Ведьмак» получила название «Перекрёсток воронов» — первые подробности - «Новости сети»
Роскомнадзор с декабря начнёт блокировать сайты за публикацию научной информации о VPN - «Новости сети»
Роскомнадзор с декабря начнёт блокировать сайты за публикацию научной информации о VPN - «Новости сети»
Миллионер с зарплатой сантехника: выяснилось, сколько зарабатывает глава OpenAI - «Новости сети»
Миллионер с зарплатой сантехника: выяснилось, сколько зарабатывает глава OpenAI - «Новости сети»
SpaceX рассказала, почему затопила ракету Super Heavy во время последнего запуска Starship - «Новости сети»
SpaceX рассказала, почему затопила ракету Super Heavy во время последнего запуска Starship - «Новости сети»
Представлена технология охлаждения чипов светом — секретная и только по предварительной записи - «Новости сети»
Представлена технология охлаждения чипов светом — секретная и только по предварительной записи - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Вёрстка » Кликабельный фон / подложка для сайта - «Верстка»

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

Смотрите также

А что там на главной? )))



Комментарии )))