whatisthis?

html. <map>과 <area> 예제 본문

PRACTICE/SELF

html. <map>과 <area> 예제

thisisyjin 2022. 2. 4. 11:22

 

 

map 태그

- name 속성(필수)

맵 참조시 사용할 수 있는 이름. / 공백문자 포함 X / id가 존재할시 name과 동일해야함.

 

 

 

 

index.html

<!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>Map-Area Practice</title>
    <style>
        img {
            display: block;
            margin: 0 auto;
            width: 260px;
            height: 232px;
            margin-top: 100px;
        }

        
    </style>
</head>
<body>
    <map name="infographic">
        <area shape="poly" coords="130,147,200,107,254,219,130,228"
            href="https://developer.mozilla.org/docs/Web/HTML"
            target="_blank" alt="HTML" />
        <area shape="poly" coords="130,147,130,228,6,219,59,107"
            href="https://developer.mozilla.org/docs/Web/CSS"
            target="_blank" alt="CSS" />
        <area shape="poly" coords="130,147,200,107,130,4,59,107"
            href="https://developer.mozilla.org/docs/Web/JavaScript"
            target="_blank" alt="JavaScript" />
    </map>
    <img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info2.png" alt="MDN infographic" />
</body>
</html>

 

 

이미지 맵핑 예제 결과

 

 

 

index.html
0.00MB

 

 

 

 

Ref.

 

 

<map> - HTML: Hypertext Markup Language | MDN

HTML <map> 요소는 <area> 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다.

developer.mozilla.org

'PRACTICE > SELF' 카테고리의 다른 글

CSS - Position prac.02  (0) 2022.02.11
CSS - Position prac.01  (0) 2022.02.11
Painting App - (app.js) 해결중  (0) 2022.02.03
javaScript. Painting App 구현 - (7) Save Image  (0) 2022.02.03
javaScript. Painting App 구현 - (6) Fill mode  (0) 2022.02.03
'PRACTICE/SELF' Related Articles more