<map>, <area> 태그를 활용하여 하나의 이미지에 링크 여러개 달기
<map> 과 <area> 태그를 활용하면 이미지 하나에 링크를 여러개 삽입할 수 있습니다.
그림판을 이용하여 정말 간단하게 이미지 파일 하나를 만들어 보았습니다.
안에 facebook이라 적혀있는 사각형을 클릭하면 facebook 사이트로 연결되고, 안에 google이라 적혀있는 원을 클릭하면 google 사이트로 연결되도록 만들어 보겠습니다.
먼저 <img> 태그를 활용하여 이미지를 삽입합니다.
그 후 <map> 태그를 만들고 그 안에 <area> 태그를 만듭니다. <map> 태그에는 이름을 붙여줘야 어떤 이미지에 대해 링크를 달 것인지 정할 수 있으므로 이름을 지어줘야 합니다. 저는 linkExample 이라고 지었습니다.
그 다음으로 <img> 태그 안에 usemap이라는 속성을 지정하고 그 안에 <map> 태그의 이름인 linkExample을 넣어주었습니다. 단, 여기서 주의해야할 점은 이름 앞에 반드시 #을 넣어야 한다는 점입니다.
<area> 태그 안의 속성들을 살펴보면, shape는 모양, coords는 좌표, href는 링크, alt는 이미지가 깨졌을 때 원활한 설명을 위해 대신 나오는 문구 입니다.
여기서 좌표를 어떻게 구하냐 의문이 들 수 있는데, 좌표는 그림판을 이용하여 쉽게 구할 수 있습니다.
이미지 파일을 그림판에서 열고 이미지부분에 마우스를 대면 그림판 좌측 아래 부분에 좌표가 뜹니다.
사각형의 경우 coords="좌표 1의 x값, 좌표 1의 y값, 좌표 2의 x값, 좌표 2의 y값"이며,
원의 경우 coords="좌표 1의 x값, 좌표 1의 y값, 원의 반지름" 입니다.
원의 반지름은 그림판에서 빨간색 박스 부분을 통해 구할 수 있습니다.
example.zip첨부한 파일의 압축을 풀고 열어서 직접 확인해보시면 더 쉽게 이해가 갈 것입니다.
'IT공부 > HTML + CSS + Javascript' 카테고리의 다른 글
| 반응형 웹 만들기 1 - 고정 그리드 레이아웃 vs 가변 그리드 레이아웃 (0) | 2021.01.08 |
|---|---|
| HTML 기초 4 - select 태그와 datalist 태그의 차이점 (0) | 2021.01.02 |
| HTML 기초 2 - table(표) 만들기 (thead, tbody, tfoot, col, colgroup 태그) (0) | 2020.12.30 |
| HTML 기초 1 - HTML 문서의 기본구조 (0) | 2020.12.29 |
방구석 세계인
관심분야 : 외국어 학습, 프로그래밍, 책 리뷰 등...