오픈마켓 나모웹에디터 이미지 맵을 이용한 새창띄우기

이미지 맵(image map)이 뭘까요? 이미지 맵이란 이미지를 링크하는 방법 중 하나로 이미지의 특정 영역에만 링크를 할 수 있는 기능입니다.


오늘은 이 이미지 맵을 이용한 새창띄우기를 하려고 합니다.
어려운게 아니니 쉽게 접근할 수 있을겁니다.


나모웹에디터의 기능중에 하나인 이미지 맵은 "하나의 이미지에 여러개의 링크"를 걸때 사용합니다.
각각 개별이미지로 만들어 링크하는 것보다 시간이 많이 절약됩니다.
쇼핑몰,오픈마켓,옥션,지마켓,11번가,새창띄우기,팝업


아래는 샘플 이미지구요..

미리보기

먼저 나모웹에디터를 실행시켜 이미지를 불러옵니다.
아래 그림과 같이 빈문서에서 마우스 오른쪽버튼을 눌러 "그림 넣기(I)"를 선택해서 불러오면 됩니다.

한개의 통 이미지에 그림과 같이 새창 링크1, 새창 링크2 처럼 링크를 해야 됩니다.
이걸 일일히 HTML태그로 작성해야 된다면 정말 어렵겠죠.. 다행이도? 나모웹에디터로 쉽고 빠르게 작업할 수 있습니다.

1. 작업할 이미지를 선택한 뒤 마우스 오른쪽 버튼을 눌러 그림 > 이미지 맵 - 사각형 영역 만들기(R)를 선택합니다.

2. 이미지 맵을 선택하면 마우스 커서 모양이 "+" 모양으로 변합니다.

3. + 모양의 마우스 커서를 그림과 같이 드래그하듯이 1번 사진 영역을 선택합니다.

4. 드래그하여 선택이 끝나면 아래 그림과 같이 "하이퍼링크 만들기"라는 새창이 뜹니다.

5. 여기서 하단의 "새 윈도우 열기(W)"를 선택합니다.(중요)

6. 새창이 뜨면 새창의 속성을 입력합니다.

주소에는 새창주소(페이지주소)를 입력하고 새창의 크기를 선택해줍니다.
보통 이미지가 가로 800픽셀이고 모니터 해상도가 세로 1,000픽셀 내외기 때문에 850픽셀 X 950픽셀 정도로 값을 줍니다. 그리고 이미지가 세로로 많이 길기때문에 스크롤바가 보여야겠지요..
역시 체크해줍니다...
상단과 좌측 여백은 "0"을 줬습니다. 여기까지 하고 "마침" 버튼을 눌러줍니다.

7. 그리고 "확인"

이미지에 링크가 제대로 됐다면 그림과 같이 점선으로 표시됩니다.
마찬가지로 2번째 사진도 같은 방법으로 링크를 만듭니다.

이미지 맵 작업이 모두 끝났다면 작업창 좌측 하단의 "미리보기"를 눌러 확인할 수 있습니다.

미리보기

html 소스도 함께 첨부합니다.
참고하세요.^^

imagemap_1.zip