HTML 매핑 이미지는 HTML 문서에서 하이퍼링크 역할을 하는 클릭 가능한 영역이 있는 클라이언트 측 이미지 맵입니다. 지도 간의 관계를 생성하려면 및 img 지도 의 HTML 요소 이름 속성 요소는 img usermap 속성과 연결됩니다.
구문
다음은 구문입니다 -
<img src=”” alt=”’ usemap=”#name_value”> <map name=”name_value”> <area shape=”” coords=”” href=”” alt=”’> <area shape=”” coords=”” href=”” alt=”’> </map>
HTML 매핑 이미지의 예를 살펴보겠습니다-
예시
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>HTML Mapping Image</h1>
<img src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt="Learn Hadoop" usemap="#hadoopImg">
<map name="hadoopImg">
<area shape="rect" coords="0,0,400,100" alt="Hadoop Logo" href="https://www.tutorialspoint.com/hadoop/images/hadoop.jpg" width="100" height="100">
</map>
<p>Click on the above logo</p>
</body>
</html> 출력
이미지에서 Hadoop의 로고 부분(코끼리)을 클릭하면 HTML 매핑 이미지가 어떻게 작동하는지 관찰할 수 있습니다-
