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

Question

volt111 @volt111

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

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

Вопрос задан 18 дек. 2023
227 просмотров

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 Автор вопроса

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

Написано 19 дек. 2023
Иван @Paveldjdhhd

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

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

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

Написано 19 дек. 2023
Иван @Paveldjdhhd

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

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

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

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

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

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

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

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

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

Войти через центр авторизации

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

HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- 16 часов назад
- 65 просмотров
0

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

+1 ещё

Простой
На чем пишут современные соц.сети, способные выдержать большой поток людей?
- 2 подписчика
- вчера
- 485 просмотров
5

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

+3 ещё

Простой
Как сформировать технологический стек для веб-приложения с геоинформационной системой отслеживания грузового транспорта?
- 2 подписчика
- вчера
- 99 просмотров
2

ответа
JavaScript

+3 ещё

Средний
Как поменять тип проекции карты в Leaflet?
- 3 подписчика
- вчера
- 715 просмотров
1

ответ
HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 2 подписчика
- вчера
- 302 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- вчера
- 66 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 01 мая
- 180 просмотров
2

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

+1 ещё

Средний
Как синхронизировать ТГ-канал и сайт?
- 1 подписчик
- 01 мая
- 135 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 30 апр.
- 97 просмотров
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- 30 апр.
- 89 просмотров
1

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Написать SEO текст для встраивания в сайт

04 мая 2024, в 09:19

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

Разработка дизайна для каталогов товаров

04 мая 2024, в 09:13

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

Администраторская часть сайта

04 мая 2024, в 08:59

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

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

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 реализуешь сам

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

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

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

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