옥션,지마켓에서 제품을 클릭하면 메뉴바나 상태바 없이 새창이 뜨는걸 본적이 있을겁니다.
가로세로 사이즈도 일정하구요.
단순히 링크만으로는 그렇게 할 수 없겠죠..
오픈마켓 새창띄우기는 단순 링크가 아닌 자바스크립트를 사용하여 새창을 띄웁니다.
그렇다면 자바스크립트란 뭘까요?
자바스크립트는 객체 지향 스크립트 언어로 HTML문서 사이에 직접 들어가 사용자가 마우스를 클릭하거나, 키보드를 입력하는 것과 같은작업을 즉시 처리할 수 있도록 도와주는 언어입니다.
예를들어 회원가입이 끝나면 나타나는 "회원가입을 축하합니다!" 라는 작은 창이라던지, 비밀번호를 잘못 입력했을때 "비밀번호가 틀렸습니다."의 문구등이 자바스크립트로 만들어졌습니다.
자바스크립트의 여러가지 용도가 있겠지만..
여기서는 자바스크립트를 이용한 새창띄우기를 소개하고자 합니다.
html에서 자바스크립트로 새창을 띄우려면 window.open 이라는 명령어를 줍니다.
아래는 window.open을 이용한 새창띄우기 소스입니다.
새창의 크기를 가로 800픽셀, 세로 1,000픽셀, 스크롤바와 주소창이 보이게하려면 아래와 같습니다.
<!--
// 새창 띄우기 함수 정의
function OP() { // 새창띄우기 OP 함수를 선언
window.open("새창주소", "small", "width=800, height=1000, scrollbars=yes, menubar=no, location=yes");
// small 구분기호
}
//-->
</script>
<a href="#" onkeypress="OP()" onclick="OP()">새창띄우기</a>
보통 자바스크립트는 html의 <head>와 </head>사이에 들어갑니다.
위 소스에서 메뉴바가 보이게 하려면 menubar=no 를 menubar=yes로 바꿔주면 되고, 주소창을 안보이게 하려면 location=yes 를 location=no 로 바꿔주면 됩니다.
입맛에 맞게 옵션값을 바꿔주면 되는거죠.
여기까지 하셨다면..
글씨에는 쉽게 링크를 걸어 새창을 띄우실 수 있습니다.
그렇다면 이미지에 링크를 걸어 새창을 띄우려면 어떻게 해야될까요?
방법은 똑같습니다.
글씨대신 이미지에 링크를 거는거죠.
이미지를 넣는 방법은 다들 아시겠지만 <img src="이미지주소" width="이미지너비" height="이미지높이" border="0">이겁니다.
이 소스를 위 소스 마지막줄에 새창띄우기 글씨자리에 넣어주면 됩니다.
<!--
// 새창 띄우기 함수 정의
function OP() { // 새창띄우기 OP 함수를 선언
window.open("새창주소", "small", "width=800, height=1000, scrollbars=yes, menubar=no, location=yes");
// small 구분기호
}
//-->
</script>
<a href="#" onkeypress="OP()" onclick="OP()"><img src="이미지주소" width="이미지너비" height="이미지높이" border="0"></a>
이렇게 하면 이미지에 링크를 걸어 새창을 띄우실 수 있습니다.
마찬가지로 스크립트는 소스는 </head> 위에 넣어줍니다.
기타 궁금하신 사항은 댓글을 이용해주세요~^^
[두번째 방법] 자바스크립트를 이용한 오픈마켓 html 새창띄우기(window.open) 2탄
[새창띄우기 기초] 오픈마켓 외부링크 차단, HTML, 새창띄우기, 상세페이지, 아이프레임, 팝업
[새창띄우기 기초] 오픈마켓 정말 간단한 롤오버 이미지 만들기
[새창띄우기 기초] 오픈마켓 나모웹에디터를 이용한 롤오버 이미지 만들기
[새창띄우기 기초] 오픈마켓 옥션,G마켓,11번가 아이프레임(iframe) 높이(세로) 자동조절
[새창띄우기 기초] 자바스크립트를 이용한 오픈마켓 html 새창띄우기(window.open) 2탄
'오픈마켓 새창띄우기' 카테고리의 다른 글
| 오픈마켓 나모웹에디터 이미지 맵을 이용한 새창띄우기 (0) | 2011.11.17 |
|---|---|
| 자바스크립트를 이용한 오픈마켓 html 새창띄우기(window.open) 2탄 (1) | 2011.11.16 |
| 오픈마켓 옥션,G마켓,11번가 아이프레임(iframe) 높이(세로) 자동조절 (7) | 2011.11.16 |
| 오픈마켓 나모웹에디터를 이용한 롤오버 이미지 만들기 (0) | 2011.11.16 |
| 오픈마켓 정말 간단한 롤오버 이미지 만들기 (2) | 2011.11.15 |