Deve.haeri

[HTML/기본] ImageMap 태그 본문

HTML-CSS

[HTML/기본] ImageMap 태그

hhaeri 2020. 11. 6. 23:11

ImageMap (이미지 맵) : 이미지의 일부에만 링크를 생성한다.
 

1. 방식

  <img usemap= "#맵이름" src = "이미지 경로"> 
  <map name = "맵이름"> 
  <area href = "링크경로" shape = "rect/circle" coords = "좌표"> 
  </map> 

2. coords 좌표 작성 방법 (단위는 px)
 1) shape = "rect" coords = "시작x,시작y,종료x,종료y"
 2) shape = "Circle" coords = "중심x,중심y,반지름" 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<img usemap = "#event" src = "assets/images/event.jpg">
	<map name = "event">
		<area href = "http://www.dominos.co.kr" shape = "rect" coords = "220,236,992,651">
		<area href = "http://www.dominos.co.kr" shape = "circle" coords = "600,950,300">
		<area href = "http://www.dominos.co.kr" shape = "rect" coords = "300,2940,864,3062">
	</map>
	
</body>
</html>

 

저작자표시

'HTML-CSS' 카테고리의 다른 글

[HTML/기본] Form 태그  (0) 2020.11.06
[HTML/기본] Table 태그  (0) 2020.11.06
[HTML/기본] anchorTag  (0) 2020.11.06
[HTML/기본] Image  (0) 2020.11.06
[HTML/기본] Font  (0) 2020.11.06
'HTML-CSS' Related Articles more
Comments