티스토리 뷰

(기초)그래서 뭘 배운거야?/HTML&CSS

HTML&CSS-26-usemap : 지정 위치로 이동시키기

Soheny.P 2021. 8. 18. 20:11
728x90
<!DOCTYPE html>
<html lang="en">

<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>
    <!-- usemap : 이미지 내 특정공간 클릭시 지정된 url로 이동되는 태그 
         img 속성으로 usemap 이용해 구현 | 반드시 태그 name값 필요 | usemap="#map_name"으로 표기
         map 내 area 태그 선언 가능 | area : 이미지 특정공간 지정 세팅 태그 
         area 제공 속성 
            - shape : 링크 영역 형태 지정 (rect-사각형, circle-원, poly-타원)
            - target : 페이지 지정 (anchor와 동일)
            - coords : 링크 영역 좌표 설정 | px단위 | rect기준 (x1,y1,x2,y2)
            - href : 문서 경로지정 (anchor와 동일) -->
    <img src="images/kids.jpg" alt="" usemap="#favorites">
    <map name="favorites">
        <!-- shape에 따라서 coords 값 다르게 설정 -->
        <!-- target="blank" : 새 창으로 url 띄우기 -->
        <area shape="rect" coords="10,10,160,200" href="http://cafe.naver.com" target="_blank" alt="">
        <area shape="rect" coords="220,10,380,200" href="https://www.facebook.com" target="_blank" alt="">
    </map>
</body>

</html>
728x90

'(기초)그래서 뭘 배운거야? > HTML&CSS' 카테고리의 다른 글

HTML&CSS-27-form : 데이터 전송 인터페이스 제공 태그  (0) 2021.08.18
HTML&CSS-25-anchor : 페이지 이동  (0) 2021.08.18
HTML&CSS-24-child & parent & iframe : 부모, 자식 페이지 이용 iframe  (0) 2021.08.18
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함