[포토샵강좌] 이미지맵으로 하이퍼링크걸기

출처 : http://allabouttech.tistory.com/110

이미지안의 문자나 이미지에 하이퍼링크 거는 방법을 알아보자.

먼저 포토샵에서 링크를 걸 이미지를 불러온다.

툴바메뉴 하단의 Jump to ImageReady (ImageReady에서 편집)를 눌러 ImageReady로 이동한다.

ImageReady의 툴바 메뉴에서 ①Rectangle Image Map Tool을 선택하고, ② 하이퍼링크를 걸 영역을 선택하면 ③ 이미지맵(Image Map)에 이름이 자동으로 부여된다.

하이퍼 링크의 URL, Target (_blank를 선택하면 새창에서 링크가 열린다.) Alt 설명을 입력한다. 이미지맵이 나타나지 않으면 Windows →Image Map을 설정해준다. 링크가 지정되었으면 최적화저장(또는 따로저장) Save Optimized (As)... 로 저장한다. 파일 확장자는 html로 지정되어야 한다.

저장된 html파일 소스를 보면 이미지 주소가 입력되어 있는데, 이 이미지를 원래 이미지가 위치한 주소로 정확히 수정한 후 소스를 사용하면 된다.

<!-- ImageReady Slices (IMG_2631.jpg) -->
<IMG SRC="images/IMG_2631.gif" WIDTH=2592 HEIGHT=1944 BORDER=0 ALT="" USEMAP="#IMG_2631_Map">
<MAP NAME="IMG_2631_Map">
<AREA SHAPE="rect" ALT="mom" COORDS="84,366,558,678" HREF="http://allabouttech.tistory.com" TARGET="_blank">
</MAP>
<!-- End ImageReady Slices -->
 

[참고]
Target
_blank : 새창에서 내용 표시
_parent: 현재 문서를 불렀던 이전화면으로 돌아가 링크된 내용을 표시
_self: 현재 프레임에 링크된 내용을 표시
_top: 프레임을 없애고 웹 브라우저 전체 화면에 링크된 내용을 표시 _blank와 비슷하지만,
새 웹 창을 열지 않는 것이 다르다.