HTML5 anchor/ image map

<Today's Goals>

• anchor 만들기
• 이미지 맵 만들기
• SVG image

 

<What i learned>

• image map 만들 때 이미지 주소로도 생성이 가능하다.
• image map에서 area shape가 circle일 경우 coords는 좌표값과 반지름크기로 지정한다.

 

<Questions>

Q: 이미지맵 좌표 쉽게 알아내는 방법(그림판 이용하는 방법 말고)

A: 그림판이 제일 쉬운 방법.. 프로그램을 이용하는 방법도 있지만 이게 제일 간편하다.

---

anchor 만들기

id 속성을 이용해 이동할 위치 지정 후, < a >태그와 href 속성을 사용 anchor로 연결할 링크 만들기.

도착 <태그 id="anchor name"> 표시될 텍스트/이미지 < /태그 >
출발 < a href="#anchor name"> 표시될 텍스트/이미지 < /a >
출발에서 클릭하면 도착으로 이동

• 텍스트 태그
• 목록 태그
• 표 생성
• 이미지와 하이퍼링크 태그

이미지 맵 만들기
map태그 area태그, usemap 속성을 이용해 이미지 위에 여러개의 링크 만들기.

 

< img src="이미지위치" alt="" usemap="#맵이름">
< map name="맵이름">
< area shape="rect" coords="10,30,160,300" href="https://www.youtube.com/" target="_blank" alt="유튜브 바로가기
< area shape="rect" coords="280,30,380,300" href="http://www.facebook.com/" target="_blank" alt="페이스북 바로가기">
</ map>

 

map 태그를 이용해 이미지 맵을 만들고,img태그에서 usemap으로 이미지맵 지정.
map태그 안에서 area태그를 이용해 링크를 이미지 위에 만든다.
shape 속성으로 링크로 사용할 영역의 모양을 지정한다.
coords 속성으로 링크로 사용할 영역을 지정한다.(시작좌표와 끝좌표)

[anchor]