티스토리 뷰

[개발]프로그래밍/html5

[html5] map,area,usemap - 하나의 이미지에 여러 링크 지정

좋은 블로그 2021. 1. 29. 09:58
1. 개념
map,area,usemap - 하나의 이미지에 여러개의 링크 지정
이미지 파일 하나에 하나의 링크를 사용할 경우에는 a href 뒤에 img src를 넣어서 사용함
예) <a href = .....><img src = ....></a>
만약 이미지 파일 하나에 여러개의 링크를 넣고자 할 경우에는 map,area를 사용하여 링크를 지정할 수 있음
2. 태그
map,area,usemap
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
1
<img src = "test.jpg" usermap = #snslink style =' width : 200px ' >
<map name = "snslink" >
2
<area shape = "rect" coords = "80,80,50,50" href = "http://facebook.com" target = "_blank" >
3
<area shape = "rect" coords = "40,30,150,100" href = "http://twitter.com" target = "_blank" >
</map>
</body>
</html>
결과 화면
코드 설명
1
<img src = ....... usermap = ....... >
img 태그에 usermap 이라는 속성을 사용하여 map name을 가져오는 것을 확인하실 수 있습니다.
즉 이미지에 mapuser를 세팅할 것일 때 name이 snslink인 것을 매칭시켜라고 부여를 해주는 것입니다.
그러면 해당하는 map name에 있는 값을 가져와서 매칭을 시켜줍니다.
2
<area shape = ....... >
여기서부터 링크를 시키고자 하는 위치와 모양 target을 설정하게 됩니다.
지금 보시면 facebook 이라는 사이트를 새창으로 띄울려고 하는 것을 볼 수 있으며 coords로 위치를 잡는 것을 확인할 수 있습니다.
원래는 페이스북이라는 아이콘 위에 놓을려고 했는데 위치 잡는 것이 쉽지가 않아서 이렇게 올립니다.
shape에는 default,rect,circle,poly 등이 있습니다.
3
<area shape = ....... >
여기서는 twitter로 사이트를 새로운 창으로 띄우기 위해 위치와 target를 설정해 주었습니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] label - 폼 요소 앞에 붙여 활용하기  (0) 2021.02.02
[html5] form - 사용자 입력 정보 보내기  (0) 2021.02.01
[html5] a - 링크와 앵커 사용하기  (0) 2021.01.28
[html5] img - 웹 브라우저에 이미지 표시  (0) 2021.01.25
[html5] colspan , rowspan - 표에서 열,행 합치기  (0) 2021.01.22
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday