a 태그를 블록 요소로 위조 메쉬 맵 만들기
이런 설치의 경우 사용확장형 맵하지만 좌표 지정 등 계산이 까다로워 더 쉽게 실현하려는 경우다.
예제
예를 들어 다음 그림의 ■ 부분을 누르십시오.
코드는 다음과 같습니다.
a 라벨을 블록 요소로 설정하고 너비와 높이를 지정하면 클릭 요소의 영역을 결정할 수 있습니다.
다음 예에서 4변이 직선일 때만 대응할 수 있지만borderradius를 통해 원형의 링크 구역을 만들 수도 있다.그러나 더 복잡한 도형에 대해서는 클릭 구역을 명확하게 결정하려면 확장 가능한 지도를 사용하는 것이 좋다.
ex.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css" media="screen">
body{
position: relative;
text-align: center;
}
.click{
position: absolute;
display: block;
width: 2%;
height: 7%;
background: #000;
}
.left{
left: 382px;
top: 164px;
}
.right{
right: 382px;
top: 164px;
}
</style>
<a href="#" class="click left"></a>
<a href="#" class="click right"></a>
<img src="http://placehold.jp/50/3d4070/ffffff/1000x350.png?text=%E2%96%A0%E2%86%90%E3%81%93%E3%81%93%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E8%A6%81%E7%B4%A0%E3%81%AB%E2%86%92%E2%96%A0" alt="">
</body>
</html>
Reference
이 문제에 관하여(a 태그를 블록 요소로 위조 메쉬 맵 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yumayamada1029/items/72a715a23c9937ae6a72텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
