Как сделать фоновое изображение кликабельным?

Question

volt111 @volt111

Как сделать фоновое изображение кликабельным?

Что нужно добавить в этот код https://jsfiddle.net/zugdy21k/ чтобы фоновое изображение переходило по той же ссылке что и кнопка, но все остальное осталось без изменений?

Вопрос задан более года назад
246 просмотров

2 комментария

Подписаться 1 Средний 2 комментария

Решения вопроса 1

12 комментариев

volt111 @volt111 Автор вопроса

Если вставить этот код, фоновое изображение искажается, растягивается, а кнопка становится невидимой. Если задать position: relative, кнопка появляется в самом низу, отдельно от фона.

Написано 25 дек. 2023

UthvfyV @UthvfyV

<html>

<title>site</title>
<style>
.bg {
width: 100%;
height: 100%;
left: 0;
position: fixed;
display: block;
}
.bg img {
width: auto;
height: 100%;
margin: 0 auto;
display: block;
}
.bg a {
width: 100%;
height: 100%;
display: block;
}
.button {
border: 1px solid #000;
width: 10%;
height: 50px;
}
a, center {
position: relative;
display: block;
}</style>
<body>
<div id="bg" class="bg"><a href="javascript:void(0)" onclick="location.href='https://site.com'"><img src="snow.gif" alt=""></a></div>
<a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>
<center><a href="javascript:void(0)" onclick="location.href='https://site.com'">
<img class="img-responsive" display="block" src="a.png" height="83" width="340"></a></center>

</body>

</html>

Написано 25 дек. 2023

volt111 @volt111 Автор вопроса

UthvfyV, там какой-то квадратик, то ли прямоугольник слева сверху, как его убрать?

Написано 26 дек. 2023
UthvfyV @UthvfyV
У вас 2 кнопки 1.
<center><a href="javascript:void(0)" onclick="location.href='https://site.com'"> <img class="img-responsive" display="block" src="a.png" height="83" width="340"></a></center>
и 2.
<a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>
Что вы имели в виду под словом кнопка, 1 или 2? Выберите нужную кнопку а другую удалите. Квадратик вверху это 1. Если 1 не нужен то удалите.
Написано 26 дек. 2023
volt111 @volt111 Автор вопроса
UthvfyV, а там 3 ссылки, этот элемент
<a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>
оказался лишним.
Еще вопрос, как убрать отступ фонового изображения сверху, а кнопку сделать чуть ниже?
Написано 27 дек. 2023
UthvfyV @UthvfyV

давайте я вам сделаю как говрится под ключ. От начала и до конца. Может и весь сайт. Или что у вас? Задание?

Написано 27 дек. 2023
volt111 @volt111 Автор вопроса

UthvfyV, только в рамках этого вопроса, там осталось чуть

Написано 28 дек. 2023

UthvfyV @UthvfyV

<html>
<title>site</title>
<style>
.bg {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
display: block;
}
a, center {
display: block;
}
body {
height: 100%;
background-image: url('snow.gif');
background-repeat: no-repeat;
min-height:100%;
background-position: center center;
background-size: auto 100%;
background-attachment: fixed;
}
center a {
padding: 10em 0 0;
}</style>
<body>
<a class="bg" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>
<center><a href="javascript:void(0)" onclick="location.href='https://site.com'">
<img class="img-responsive" display="block" src="a.png" height="83" width="340"></a></center>
</body>
</html>

Написано 28 дек. 2023

volt111 @volt111 Автор вопроса

UthvfyV, появилась полоса прокрутки и кнопка стала слишком низко, как в оригинале высоту можно сделать?

Написано 29 дек. 2023

UthvfyV @UthvfyV

<html>
<style>
body {
height: 100%;
margin: 0;
background-image: url('snow.gif');
background-repeat: no-repeat;
min-height:100%;
background-position: center center;
background-size: auto 100%;
background-attachment: fixed;
}
a {
margin: 20px 0 0;
/* двигаем а
margin: 20px 0 0 0;
margin внешний отступ от границы
padding: 0px 0 0 0;
padding внутренний отступ от границы 
margin: 20px 0 0 0;
margin: 1 2 3 4;
1 отступ от верха
2 отступ от правой стороны
3 отступ от нижней границы
4 отступ от левой сороны 
т.е. чтоб сделать от верха меньше надо написать
margin: 10px 0 0 0;*/
display: block;
}
.img {
height: 0px;
}</style>
<body onclick="location.href='https://site.com'">
<img class="img" src="">

<center class="center"><a href="javascript:void(0)" onclick="location.href='https://site.com'">
<img src="a.png" height="83" width="340"></a></center>
</body>
</html>

Написано 29 дек. 2023

volt111 @volt111 Автор вопроса

UthvfyV, меняю цифры margin ничего не меняется. С таким параметром "javascript:void(0)" ссылку фона можно сделать? и чтобы ссылки открывались в отдельном окне?

Написано 30 дек. 2023
UthvfyV @UthvfyV
где ты цифры меняеш? Надо здесь.
a { margin: 20px 0 0; /* двигаем а
20px это отступ от верха. Ссылка фона это ссылка body, у body есть ссылка
<body onclick="location.href='https://site.com', '_blank'">
onclick это и есть ссылка, т.е. кликаеш по body и благодаря onclick тебя перенаправляет на https://site.com. А чтобы ссылка открыалась в новом окне используй
<body onclick="window.open('https://site.com', '_blank');return false;">
Написано 30 дек. 2023

Пригласить эксперта

Ответы на вопрос 1

7 комментариев

volt111 @volt111 Автор вопроса

Нужно чтобы при клике по фоновому изображению открывалась ссылка, куда в какие теги кода ее добавить?

Написано более года назад
Иван @Paveldjdhhd

volt111, ты просишь уже готовое решение? Тогда на другой сайт надо: фриланс. Тут могут помочь с проблемой и тебе помогли, подсказав что делать

Написано более года назад
volt111 @volt111 Автор вопроса

Иван, в том то и дело что ничем не помогли, все что здесь написано абсолютно бесполезно.

Написано более года назад
Иван @Paveldjdhhd

volt111, даешь тегу с фоновым изображением айди, любой. Ищешь по айли и ставишь прослушивание нажатия используя "addEventListener("click", redirectUser);", в "redirectUser" перенаправляешь пользователя на нужную ссылку. Я описал щас все шаги. Осталось только перевести всё это в код. За вас и его написать?

Написано более года назад
volt111 @volt111 Автор вопроса

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

Написано более года назад
Daishinkan @Daishinkan
volt111,
<a href="ссылка.html"> <img src="фоновое_изображение.jpg" alt="фоновое изображение"> </a>

Вот еще более простая реализация. Здесь преимущественно помогают с кодом, а не пишут его за вас
Написано более года назад
volt111 @volt111 Автор вопроса

Daishinkan, если вставить этот код, фоновое изображение перестает подстраиваться под размер экрана. Нужно чтоб этот параметр "background-size: cover;" оставался без изменений.

Написано более года назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 9 часов назад
- 59 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 17 часов назад
- 59 просмотров
0

ответов
Веб-разработка

Простой
Как автоматизировать покупку товаров?
- 1 подписчик
- вчера
- 177 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- вчера
- 67 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- вчера
- 117 просмотров
1

ответ
Веб-разработка

Простой
Postman. Как увеличить время жизни токена?
- 1 подписчик
- вчера
- 118 просмотров
0

ответов
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- вчера
- 111 просмотров
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 33 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 216 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 111 просмотров
0

ответов
Показать ещё Загружается…

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 120 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Написать парсер

24 дек. 2024, в 19:08

20000 руб./за проект

Разметка датасета с помощью VGG Image Annotator (VIA)

24 дек. 2024, в 18:29

1500 руб./за проект

Перенос Python кода с визуализацией на Flask в Trading view

24 дек. 2024, в 17:46

5000 руб./за проект

За кликабельный фон ты будешь проклят юзерами и улетишь в бан ПС.

Answer 1 · 2023-12-25 02:23:58

Daishinkan Daishinkan правильно написал, если body задать background то другого метода сделать body ссылкой наверно нет. При помощи js указать body перенаправить по ссылке. А если говорить о html то если хотите сделать background ссылкой, то body для этого мягко скажем не подходит. Можно сразу после <body> написать

<style>
.bg {
width: 100%;
height: 100%;
left: 0;
position: fixed;
display: block;
}
#bg img {
width: 100%;
height: 100%;
display: block;
}</style>
<body>
<div id="bg" class="bg"><a href="javascript:void(0)" onclick="location.href='https://site.com'"><img src="snow.gif" alt=""></a></div>

Некоторое содержимое body при этом может быть невидным. Поэтому там где содержимое невидно задайте ему position: relative

Answer 2 · 2023-12-18 19:54:37

Ставь прослушивание клика на фото и самостоятельно перенаправляй пользователя по нужной ссылке.

addEventListener("click", redirectUser);

Где функцию redirectUser реализуешь сам

Как сделать фоновое изображение кликабельным?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт