나는 매우 도전이 여기!
디자이너 이 ligth 트리는 몇 가지 관광 명소는 마우스를 가져야 한 메뉴가 표시를 링크하는 페이지에 웹 사이트입니다. 그 뿐만 아니라,가리키면 오버레이 shuld 활성화를 변경하 틴트의 전체 사이트(일종의 오버레이는 블랙으로 감소 불투명도)
문제 내가 직면하는 것은 정말 어디 있는지 몰라도 이것! 나는 생각을 구현하는 몇 가지 종류의 이미지맵,그러나 내가 알지 못하는 방법 설정 반응 그리고 정말 어렵게 나를 생각하기 위한 솔루션이자 도전입니다.
당신이 볼 수있는 스크린에서 빛이 나는 것으로 헤더를 배경 및 해야 위에 위치해 일부의 특정 부분 나무입니다.
도움이 될 것입니다 정말 감사
이 시작 지점이 될 수 있습니다. 알고 있으신 이미지 크기에서 당신의 사례가 914x913...당신은 진행하지 않습니다 position: absolute; 과 픽셀에서 오른쪽,왼쪽,위,아래 따라 당신이 원하는 곳에 그것은 단지 문제의 측정(작은 시험과 오류도). 참조 코드 조각을...내가 만든 두 개의'hotspots'당신을 위해 시작(에서 설명하는 적색). 고자할 때 나타나는 롤오버가 할 수 있습니다,위치를 분명히 스타일의 그것보다 더 나은 일반 상자입니다. 방법에 의해 <span></span> 요 수 있도록'핫스팟을 수 있는 별도의 그렇지 않으면 빛을 할 것이 이상한 일과 배경 이미지입니다. 오 및 계획인 경우 이러한 지원을 작 뷰포트를 추가해야는 미디어에 대한 쿼리를 각각의 위치를 조정하기 위해 각 핫스팟합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<title>Test</title>
<style>
body {
font-family: sans-serif;
color: white;
}
.container {
background-image: url('https://i.stack.imgur.com/lzxlC.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
display: flex;
width: 914px;
height: 913px;
margin: 0 auto;
position: relative;
}
/* SPOT 1 */
.spot-1 {
position: absolute;
left: 323px;
top: 148px;
}
.spot-1 span {
border: 3px solid #FF6F6F;
border-radius: 50px;
height: 30px;
width: 30px;
display: flex;
align-self: center;
}
.spot-1:hover span {
box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
animation: fadeIn 1s linear;
}
.box-1 {
display: none;
}
.spot-1:hover .box-1 {
display: flex;
width: 80px;
height: 25px;
background: black;
color: white;
position: relative;
left: 50px;
padding: 12px;
font-size: 10px;
}
/* SPOT 2 */
.spot-2 {
position: absolute;
left: 515px;
top: 163px;
}
.spot-2 span {
border: 3px solid #FF3F3F;
border-radius: 50px;
height: 30px;
width: 30px;
display: flex;
align-self: center;
}
.spot-2:hover span {
box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
animation: fadeIn 1s linear;
}
.box-2 {
display: none;
}
.spot-2:hover .box-2 {
display: flex;
width: 80px;
height: 25px;
background: black;
color: white;
position: relative;
left: 50px;
padding: 12px;
font-size: 10px;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="spot-1"><span></span>
<div class="box-1">HOWDY!</div>
</div>
<div class="spot-2"><span></span>
<div class="box-2">HI</div>
</div>
</div>
</body>
</html>