*이용한 사이트
maschek.hu - Online Image Map Editor
maschek.hu
*기본구성
-이미지를 삽입한다
-사이트에서 이미지파일을 선택하여 업로드 한 후, 특정영역을 누르고 좌표가 뜬 아래의 코드를 복사하고 코드에 붙여넣는다.(불필요한 부분은 삭제하기)
CODE
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="coffee.jpg" alt="coffee" usemap="#map1">
<map name="map1">
<area shape="rect" alt="" title="" coords="228,62,287,122" href="https://zindex.tistory.com/" target="" />
</map>
</body>
</html>
참고 화면
'HTML & CSS' 카테고리의 다른 글
| form 사용하기 (0) | 2022.05.16 |
|---|---|
| 여러개로 구성된 하나의 이미지 중 원하는 영역 배경이미지 사용(spritecow 이미지 좌표 확인 사이트) (0) | 2022.05.16 |
| 메뉴에 hover시 글자 아래에 밑줄 생기기(transition) (0) | 2022.05.16 |
| 1depth와 2depth 메뉴 만들기 (0) | 2022.05.16 |
| 자식태그 호출 사용법 nth-child(n), nth-of-type(n) (0) | 2022.05.09 |
