Сделайте правую часть изображения заголовка интерактивной
У меня есть заголовок на всю ширину страницы. В этом заголовке есть CSS с фоновым изображением. На этом изображении есть текст в центре и поле «Свяжитесь с нами» с правой стороны этого изображения. Как сделать эту кнопку интерактивной (чтобы пользователь нажимал на нее и переходил по ссылке). Желательно, чтобы только правая часть этого изображения заголовка была интерактивной. Можно ли это сделать с помощью jquery?
Взломы приветствуются.
Привет, а где код?
Используйте карту изображений: developer.mozilla.org/en-US/docs/Web/HTML/Element/map
Ответы 2
Вы должны создать его с position: relative для заголовка и position: absolute для элемента. Попробуйте этот код.
<div class = "header">
<a href = "#" class = "link"></a>
</div>
.header {
position: relative;
}
.header .link {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 100px;
z-index: 2;
}
- Похоже, ваш вопрос больше о том, как создать меню навигации.
Я бы посоветовал вам использовать «сетку», встроенную в css. Таким образом вы можете создать несколько областей на верхней панели и добавить изображения или текст. Я не рекомендую вам использовать карту изображений, так как вы затем используете позиционирование, которое не будет адаптироваться в зависимости от вашего устройства.
Ниже у вас есть база, в которой используется сетка. Для простоты я добавил как HTML, так и CSS. Если вы хотите создать панель навигации, вам нужно добавить текстовые ссылки и разместить их в соответствующей области.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Test</title>
<!--CSS-->
<style>
.wrapper {
display: grid;
grid-template-columns:
1fr
1fr
1fr
;
grid-template-rows:
100px
;
grid-template-areas:
"header-1-left header-1-mid header-1-right"
;
}
.header-1-left {grid-area: header-1-left; background-color: grey;}
.header-1-mid {grid-area: header-1-mid; background-color: pink;}
.header-1-right {grid-area: header-1-right; background-color: lightblue;}
</style>
<div class = "wrapper">
<div class = "header-1-left"></div>
<div class = "header-1-mid"></div>
<div class = "header-1-right"></div>
</div>
</head>
<body>
</body>
</html>
Привет, поделитесь, пожалуйста, своим кодом.