자바스크립트 팝업 이미지 클릭시 <a 사용하지 않고 띄우기

팝업을 띄울 때 하이퍼링크 <a></a> 테그를 사용하지 않고 이미지에 바로 적용하고 싶을 때 다음과 같이 처리 할 수 있습니다.

<img src="이미지.gif" style="border:0;cursor:pointer" onClick="window.open('popup.html','팝업','width=532,height=520,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,left=150,top=100')">

각 항목 별로 설명 하겠습니다.

src : 이미지 경로 입니다.

style : 이미지에 대한 스타일 지정

- border : 이미지의 테두리 선을 보이지 않게 하기 위해서 두께를 0 (픽셀)을 줬습니다.

- cursor : 하이퍼 링크 테그가 적용되지 않아 이미지에 마우스를 올려 놓을 때 아무런 반응이 없으면 링크가 걸려 있는지 확인이 안되겠죠. 따라서, 이미지에 마우스가 올라 올때 손가락 모양으로 표시되도록 마우스 포인터 모양을 "pointer"로 적용 했습니다.

onClick : 이미지를 클릭시 발생하는 이벤트로 자바스크립트 바로 입력 가능합니다.

- window.open() : 자바스크립트의 팝업 함수 입니다. 윈도우 창을 열라는 뜻. () 안에 윈도우 창(팝업)에 대한 설정을 입력합니다. onClick="" 에서 이미 " " 쌍따옴표를 사용했으므로 window.open() 안에서는 ' ' 홀따옴표로 각 옵션을 구분합니다. (' 팝업주소','팝업명','팝업속성')

1. 첫번째 ' ' 홀따옴표 안에 팝업으로 띄울 웹페이지 URL을 넣습니다.

2. 두번째 ' ' 홀따옴표 안에 팝업 구분값을 넣습니다. 만약 팝업을 2개이상 띄울 때 같은 이름이면 기존 팝업안에서 팝업 내용이 나타나게 됩니다. 팝업이 하나라면 아무 이름을 사용해도 상관 없습니다.

3. 세번째 ' ' 홀따옴표 안에 팝업 속성값을 넣습니다.

- width : 팝업 창 폭 (픽셀)

- height : 팝업 창 높이 (픽셀)

- toolbar : 팝업 창 상단 툴바 표시 유무 (yes, no)

- location : 팝업 창 상단 주소줄 입력란 표시 유무 (yes, no)

- status : 팝업 창 하단 상태 표시 부분 표시 유무 (yes, no)

- menubar : 팝업 창 상단 메뉴 부분 표시 유무 (yes, no)

- scrollbars : 팝업 창 우측 스크롤 부분 표시 유무 (yes, no, auto)

- resizable : 팝업 창 크기 조절 가능 유무 (yes, no)

- left : 팝업 창 뜰 때 위치 모니터의 좌측 (0,0) 기준 오른쪽으로 이동 거리 (픽셀)

- top : 팝업 창 뜰 떄 위치 모니터의 좌측 (0,0) 기준 아래쪽으로 이동 거리 (픽셀)

* 위 팝업 속성 이외에도 더 있는걸로 아는데 기본적으로 사용하는 것만 적용 했습니다.

만약, window.open() 함수를 이용해서 팝업을 띄울 때 위 옵션들을 모두 yes 즉, 새창으로 띄우고 싶다면 다음과 같이 하시면 됩니다.

<img src="이미지.gif" style="border:0;cursor:pointer" onClick="window.open('popup.html','_blank')">

아주 간단하죠!

지금까지 이미지에 하이퍼링크를 이용하지 않고 띄우는 방법이었습니다.

감사합니다. ^.^

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=112