2018. 10. 19. 12:40 HTML5 | CSS3

이미지맵 (image map)

이미지맵

shape : circle, rect, poly

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
32
33
34
<!doctype html>
<html lang="ko">
    <head>
        <title>이미지맵</title>
        <meta charset="utf-8">
    </head>
    <body>
        <img src="http://allwinz.com/img/main_img_1.png" alt="e모든창호" usemap="#imageMap">
        <map name="imageMap">
            <!-- 
                원형영역 
                shape="circle"
                coords="중심점 x, 중심점 y, 반경 r"
             -->
            <area shape="circle" coords="186, 268, 110" 
            href="http://allwinz.com/bbs/board.php?bo_table=notice" target="_blank" alt="공지사항">
            <!-- 
                사각형 영역 
                shape="rect"
                coords="좌측상단 x, 좌측상단 y, 우측하단 x, 우측하단 y"
             -->
            <area shape="rect" coords="38, 408, 340 467" 
            href="http://allwinz.com/bbs/content.php?co_id=company" target="_blank" alt="회사소개">            
            <!-- 
                다각형 영역 
                shape="poly"
                coords="꼭지점 x, 꼭지점 y, 꼭지점 x, 꼭지점 y, 꼭지점 x, 꼭지점 y,..."
             -->
            <area shape="poly" coords="400, 326, 557, 297, 554, 232, 643, 233, 644, 299, 
            847, 317, 847, 457, 397, 453, 400, 326" href="https://blog.naver.com/tmzlf01" 
            target="_blank" alt="블로그">
        </map>
    </body>
</html>
cs


이미지맵

저작자표시

'HTML5 | CSS3' 카테고리의 다른 글

html5 새로운 input 요소  (0) 2018.10.08
html css 공부하기 유용한 사이트  (0) 2018.10.07
posted by 해에게서소년에게

티스토리툴바