쥬로그

HTML 이미지 맵 만들기 본문

Study/HTML CSS

HTML 이미지 맵 만들기

쥬쥬씨 2021. 9. 15. 17:35
반응형

* 이미지 맵

: 하나의 이미지에 여러 개의링크를 만드는 것

위 이미지에 맵을 생성해보자.
루피의 왼쪽 눈에 뽀로로 홈페이지를, 이빨에 티스토리를 연결하려고 한다.
그러기위해선 눈의 중심 위치, 반지름 길이와 이빨의 왼쪽 상단 위치, 오른쪽 하단 위치의 정보가 필요하다.
위치 정보는 그림판에서 알아낼 수 있다!

1) 원형 영역에 map 생성

<img src="images/fnvl.png" alt="루피 야나두" usemap="#siteMap"> <map name="siteMap"> <area shape="circle" coords="315, 109, 17" href="https://home.ebs.co.kr/pororo/etc/36/htmlMenu" alt="뽀로로 캐릭터 소개 중 루피" target="_blank"> </map>


2) 사각 영역에 map 생성

<img src="images/fnvl.png" alt="루피 야나두" usemap="#siteMap"> <map name="siteMap"> <area shape="rect" coords="336, 236, 378, 257" href="https://jujudywithsw.tistory.com/" alt="주주디 티스토리 연결" target="_blank"> </map>

<img src="images/fnvl.png" alt="루피 야나두" usemap="#siteMap"> <map name="siteMap"> <area shape="circle" coords="315, 109, 17" href="https://home.ebs.co.kr/pororo/etc/36/htmlMenu" alt="뽀로로 캐릭터 소개 중 루피" target="_blank"> <area shape="rect" coords="336, 236, 378, 257" href="https://jujudywithsw.tistory.com/" alt="주주디 티스토리 연결" target="_blank"> </map>

* usemap에 # 잊지말고 꼭! 넣자

✔ 브라우저에서 확인해 보면 생성한 map 부분에 커서를 가져가면 변하는 것을 확인할 수 있다.
✔ 이미지 맵은 주로 메일에서 많이 활용된다.
메일로 보낼 때는, <body> ~ </body> 사이 태그를 복사해서 html 모드에 태그를 붙여 넣어 보내면 된다.

😎 결과물을 확인해보자!



😊 Do it! HTML5 + CSS 웹 표준의 정석 책으로
독학하는 코린이의 공부 기록

반응형
저작자표시 비영리 변경금지

'Study > HTML CSS' 카테고리의 다른 글

HTML 사용자 입력 태그 (input tag)  (0) 2021.10.09
HTML 폼 태그 (form tag)  (0) 2021.10.07
웹 이미지 형식 - SVG  (0) 2021.09.15
웹 이미지 형식 - GIF, JPG/JPEG, PNG  (0) 2021.09.14
HTML 이미지 태그 (image tag)  (0) 2021.09.14
'Study/HTML CSS' Related Articles more