디지털콘텐츠 No.1 (주)아사달 디자인센터
내정보 SI 도메인 호스팅 디자인몰 솔루션몰 홈페이지몰 모바일 디자인센터 게임 고객지원
로그인 회원가입 장바구니 주문내역
트렌드뷰 웹강좌 자료실
배경이미지
베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
  - HTML 소개
  - 텍스트
  - 링크
  - 이미지
  - 테이블
  - 인클루드
  - 프레임
  - 폼(FORM)
  - 이미지 자르기
  - 색상코드표
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
일러스트 배경 만들기
일러스트 아이콘 만들기
일러스트 그래픽 만들기
편집사진 만들기
배경 편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
이미지
Home > 디자인 센터 > 웹강좌 > HTML 사용법 > 이미지
이미지 포맷 이미지 삽입 이미지 정렬 이미지맵 만들기

이미지맵이란 이미지의 특정한 부분에 링크를 거는 것입니다. 만약, 이미지맵을 이용하지 않는다면 작은 이미지라 할지라도 각각 잘라서 링크를 거는 수밖에 없습니다. 하지만, 이미지맵을 이용하면 하나의 이미지에서 원하는 부분만을 골라 링크를 걸 수 있으므로 편리합니다.

이미지맵의 형식은 다음과 같습니다.

<img src="image/map.gif" alt ="대체설명" usemap="#이미지맵 이름">
<map name="이미지맵 이름">
    <area shape="rect" coords="7, 26, 30, 49" href="url" alt="링크1로 이동">
    <area shape="circle" coords="150,58,25" href="url" alt="링크2로 이동">
    <area shape="poly" coords="154, 0, 109, 0, 88, 14, 154, 71" href="url" alt="링크3로 이동">
    </map>

이미지맵을 사용하기 위해서는 일단 ②에서 <map>을 이용하여 해당 이미지가 이미지맵임을 선언합니다. 이미지맵의 이름은 원하는 대로 임의로 정해줍니다. 그리고 <area> 태그를 이용하여 링크가 적용되는 부분의 모양을 지정합니다. 이미지맵의 모양은 사각형, 원형, 다각형의 총 3가지입니다. coords는 링크될 영역의 좌표값을 입력합니다.

영역의 모양 좌표값
RECT 사각형 "왼쪽 상단의 X좌표, Y좌표, 오른쪽 하단의 X좌표, Y좌표"
CIRCLE 원형 "원의 중심의 X좌표, Y좌표, 반지름의 길이"
POLY 다각형 "모든 꼭지점의 X좌표, Y좌표"를 차례로 기입

그리고, ①에서 <img> 태그 안에서 usemap="#이미지맵의 이름"을 추가하면 해당 이미지에 이미지맵의 기능이 추가됩니다.


이미지맵 입력 시 필요한 좌표는 포토샵에서 이미지 작업 시 'info' 창을 이용하여 아래와 같이 적어두면 편리합니다.

아래의 예제 결과에서 3개의 서로 다른 도형을 눌러보세요!
도형 위에 마우스를 갖다 대면 그에 해당하는 설명창이 뜨고, 사각형, 원형, 다각형의 형태로 클릭되는 것을 확인할 수 있습니다.

<html>
<head>
<title>이미지맵 만들기</title>
</head>
<body>
    <img src="http://center.asadal.com/image/center/web/html/image_img05.gif" width="350" height="100" border="0"
    usemap="#map1">
    <map name="map1">
        <area shape="rect" coords="31, 24, 84, 78" href="http://www.daum.net"
        target="_blank" alt="다음으로 이동!">
        <area shape="circle" coords="163,52,30" href="http://www.empas.com"
        target="_blank" alt="엠파스로 이동!">
        <area shape="poly" coords="257,22,289,22,305,49,289,76,258,76,241,49"
        href="http://kr.yahoo.com" target="_blank" alt="야후로 이동!">
    </map>
</body>
</html>


하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 회사소개 사진모음 협력사 오시는길 이용약관 개인정보취급방침 전화상담안내 게시판문의 한국어 라인 이미지 中文 라인 이미지 日本語 라인 이미지 해시넷 라인 이미지 타고 라인 이미지 사이트맵 하단 메뉴 배경 이미지
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 1544-8442 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 08507) 서울시 금천구 가산디지털1로 168 우림라이온스밸리 A동 8층 (주)아사달
(우편번호 : 153-786) 서울시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
인터넷 익스플로어 구글 크롬 모질라 파이어폭스
애플 사파리 오페라 넷스케이프
맨위로   접속통계
디지털콘텐츠 No.1 (주)아사달