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

Question

volt111 @volt111

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

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

Вопрос задан 18 дек. 2023
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 Автор вопроса

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

Написано 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

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

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

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

PHP

+3 ещё

Простой
Firefox больше не отправляет в HTTP_ACCEPT image/webp?
- 2 подписчика
- 3 часа назад
- 65 просмотров
1

ответ
Python

+2 ещё

Простой
Как в Visual Studio написать веб-проект Пайтон если не появляется строка?
- 1 подписчик
- 4 часа назад
- 34 просмотра
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 5 часов назад
- 45 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 5 часов назад
- 28 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 9 часов назад
- 45 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 10 часов назад
- 61 просмотр
1

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

+1 ещё

Простой
Какой отечественный linux выбрать для веб-разработки?
- 2 подписчика
- 12 часов назад
- 471 просмотр
7

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

+1 ещё

Средний
Как сделать загрузочный экран, чтобы он был виден всем кто онлайн?
- 1 подписчик
- 20 часов назад
- 101 просмотр
1

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

Простой
Правильная ли структура объекта для multi menu?
- 1 подписчик
- 21 час назад
- 45 просмотров
0

ответов
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- вчера
- 31 просмотр
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Смонтировать видео

23 нояб. 2024, в 01:31

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

Настроить сайт

23 нояб. 2024, в 00:16

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

Разобрать текущий ETL-процесс

22 нояб. 2024, в 23:55

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

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

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

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

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

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

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