interactive_design/web_2010_spring

이미지를 팝업 새창으로 깔끔하게 띄우기

jisunlee 2010. 6. 7. 14:53

그림을 클릭하면 그림이 새 창에 뜨는 것
<a href="javascript:openwindow('http://hobbang.co.kr/hobbang/images/hobbang-01-1.gif', 100,100)"><img src="http://hobbang.co.kr/hobbang/images/hobbang-01-1.gif" border="0"></a>
←클릭해보세요

새 창(보통 팝업창이라고 하죠)이 자동으로 뜨는거하구 클릭해서 뜨는거를 설명합니다..


아래의 빨간색 부분을 새창을 띄우는 링크를 하고 싶은 HTML 문서에 써 줍니다..

<script LANGUAGE="Javascript">
<!--
function openwindow(opage, x, y) {
farwindow = window.open('','Links','width='+x+', height='+y+', toolbar=0, scrollbars=0, resizable=no');
if (farwindow != null) {
if (farwindow.opener == null) {
farwindow.opener = self;
}
farwindow.location.href = opage;
}
}
//-->
</script>



위의 자바스크립트를 반드시 써줘야 새창이 나타납니다..
위에서 지정된 openwindow() 함수에 의해 새로운 창이 뜨게 하는데요..


Links는 새 창의 이름입니다.. 창의 이름을 지정하여 두면 openwindow()를 사용한 곳을 클릭할 때마다 매 번 새 창이 뜨지 않고 하나의 새 창에서 클릭한 주소의 내용이 나타나게 됩니다..
Links 대신 ''로 작은따옴표를 바로 열고 닫고 하면 창의 이름이 없기 때문에 매번 새로운 창이 뜹니다..

x는 창의 width(가로 크기), y는 창의 height(세로 크기)입니다..

toolbar=0 는 익스플로러의 메뉴 아래에 있는 도구아이콘이 나타나지 않게 하는거구요..

scrollbars=0 는 스크롤바가 나타나지 않게 하는거에요..
스크롤바가 필요하면 scrollbars=1 로 고치면 될꺼에요..

resizable=no 는 창에서 창의 크기를 변화시킬 수 있는 창의 오른쪽 위에 있는 창크기조절 아이콘을 사용하지 못하게 하는거에요..
resizable=yes라구 하면 사용할 수 있게 되죠..
새 창에서 상태표시줄은 나타나지 않습니다..
그리고 새창은 창 최대화 버튼은 사용하지 못하도록 되어 있답니다.. 새 창을 크게 하고 싶다면 새 창에서 키보드 F11 키를 누르면 됩니다..

openwindow()를 사용하는 방법은
openwindow()를 불러오는 곳에서 창에 뜰 주소(HTML, 그림, .swf 파일 등의 주소) 와 창의 크기를 지정해서 적어주면 됩니다..
창에 뜰 주소는 반드시 작은 따옴표로 막아두셔야 합니다. (예: 'http://hobbang.co.kr')

새창 띄워주는 자바스크립 부분(맨 위의 빨간색 소스 부분)을 .js 파일로 만들어서 사용하면 HTML 문서에서는 .js 파일을 불러오는 script 태그만 사용하면 되니까 편리합니다..
아래 내용을 메모장에서 파일 형식을 .js로 해서 파일로 저장하세요. (파일이름 예 : newwindow.js) function openwindow(opage, x, y) {
farwindow = window.open('','Links','width='+x+', height='+y+', toolbar=0, scrollbars=0, resizable=no');
if (farwindow != null) {
if (farwindow.opener == null) {
farwindow.opener = self;
}
farwindow.location.href = opage;
}
}


.js 파일은 자신의 홈에 올려놓구요..
(파일 올리는 건 자신의 홈 관리자로 들어가서 파일 올리기 메뉴를 사용하세요)
openwindow()를 사용하고 싶은 문서에서는 아래처럼만 추가하면 됩니다..
<script language="javascript" src=".js파일의주소와이름"></script>
.js파일의주소와이름은 자신의 홈주소와 파일이름을 주소로 적어주면 됩니다..
(예: http://hobbang.co.kr/newwindow.js)

출처 : http://hobbang.co.kr/zboard/zboard.php?id=snow21&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&keyword=%BB%F5%C3%A2&select_arrange=headnum&desc=asc&no=339

----------------------------------------------------------
1. 글자 또는 이미지를 클릭하면 새로운 웹사이트로 이동

<a href="링크할 URL">글자 또는 <img src="주소"></a>

**문자열이나 그림을 다른 HTML문서나 웹사이트로 링크시킨다.
문자열에 링크가 설정되면 파란색으로 밑줄이 그어지게 되고,
그림에 링크가 설정되면 그림주위에 파란색의 겅계선이 나타난다

**그림의 경계선은 <img>태그의 border="0" 으로 설정하고, 문자열은의 밑줄은 스타일 시트사용





2. 새창으로 사이트 띄우기

<a href="링크할 URL" target="창이름">글자</a>

**창이름 : _blank - 새로운 창으로 링크될 문서를 불러옴

_parent - 링크될 문서가 원래 프레임인 부모프레임에 나타냄

부모프레임이 없는 경우 _self 와 같다

_top - 프레임을 해제하고 링크될 문서를 창 전체로 불러옴 (= _new)

_self - 링크될 문서를 원래 같은 프레임으로 불러옴





3. 새창띄우기(java script) : <body>와 </body>사이에 삽입

window.open("링크할 URL","창이름","속성")

**속성 : 필요하면 [=yes]나 [=1] , 필요없으면 [=no]나 [=0]으로 지정

location : 주소표시줄
directoryies : 연결
resizable : 크기조절
staus : 상태표시줄
toolbar : 표시단추
memubar : 메뉴
width : 새창 너비
height : 새창 높이
left : 새창 왼쪽 위치
top : 새창 위쪽 위치



**가로"n" 세로"n" 크기로 새창띄우기 - [최대화시킬 수 있음]

<a href="#" >글자</a>



4. 작은이미지를 클릭하면 큰이미지 띄우기

<a href="이미지URL"><img src="이미지URL" border="n" width="n" height="n"></a>



사이트 첫페이지나 중간 중간에 작은 창을 이용하여 공지사항을 달아놓은 것을 많이 보았을 것입니다.

이러한 것은 자바스크립트를 이용한 브라우져 조절 기능인데...알고 있으면 아주 유용하게 사용할 수 있습니다.

기본적으로 이 기능을 사용할 때는 자바스크립트의 window.open 을 사용합니다.

상황 소스
자동 팝업시 <script>window.open('원하는 웹페이지주소','...','....','.....')</script>
클릭 팝업시 <a href="#" onclick="window.open('원하는 웹페이지주소','...','...')">클릭</a>

일반적으로 우리가 새창을 띄울때는 위의 두가지 경우가 대부분입니다.
설명해놨듯이 "자동팝업시"란 웹페이지가 로딩되면서 바로 새로운 창이 생기는 것을 말하며,
클릭 팝업시란 링크된 부분을 클릭해야 만히 새창이 뜨는 것을 말합니다.

소스의 중간에 '...','...' <--이런 부분에 바로 브라우져창을 조절하는 속성이 들어가게 된다.
그러면 그 속성들을 알아보도록 하죠^^

 
menubar=yes/no 윈도우의 menubar 표시여부
directories=yes/no 윈도우의 directory button들의 출력여부
location=yes/no 윈도우의 location box 표시여부
status yes/no 윈도우의 상태표시줄 표시여부
toolbar=yes/no 윈도우의 toolbar 표시여부
scrollbars=yes/no 윈도우의 가로 세로 scrollbar 표시여부
resizable=yes/no 윈도우의 크기가 조정될 수 있는 지 결정
width=수치 윈도우의 너비 결정
height=수치 윈도우의 높이 결정
top=수치 윈도우의 위치조절(화면 상단으로 부터 간격 조정)
left=수치 윈도우의 위치 조절(화면 왼쪽으로 부터 간격 조정)

※ 참고적으로 yes의 경우 표시,출력,크기조정 가능.....no의 경우 표시, 출력, 크기조정 불가를 나타냅니다.

예를 들어 소스를 만들어 보죠^^

클릭시 <a href="#" onClick="window.open('banner.htm','_blank','toolbar=no,location=no,status=no,menubar=no, scrollbars=auto,resizable=no,width=424,height=219 top=10 left=10')">클릭</a>
자동팝업시 <Script>window.open("banner.htm",'_blank','toolbar=no,location=no,status=no,menubar=no, scrollbars=auto,resizable=no,width=424,height=219 top=10 left=10')</script>

※ 주의점 - 위에 소스를 적을 때 "" 쌍따옴표 사이에 공란이 있으면 안되고요..

그리고 웹페이지 주소 다음에 _blank 부분은 name 설정이 들어가는 부분입니다.
원하는 창의 네임을 지정해주고 그 네임으로 팝업을 하면 해당 팝업창에 주소부분의 웹페이지가 뜨게 되는 거죠.

하핫^^ 세상에는 꼭 남들과 반대로 가고 싶어하는 사람들이 소수(?) 있습니다.
즉, 자기는 FM을 추구한다 하시는 분들, 조금 더 어렵게 사용하고 싶다하는 분들,
남들과는 차별되고 싶다하시는 분들은 아래 소스를 사용하세요^^

<script language="javascript">

function OpenAnotherWin(szhref){
AnotherWin = window.open(szhref,"AnotherWin",
"toolbar=yes,location=yes,directories=yes,
status=yes,menubar=yes,scrollbars=yes,
resizable=yes,width=300,height=300");
}

</script>

단, 위의 소스를 <head></haed> 사이에 넣고
<body>부분에 onLoad='OpenAnotherWin("이동할 웹페이지주소")'> 를 반드시 넣기를 바랍니다.^^


창닫기 버턴 <input type="submit" value="창닫기" onclick="window.close()">
or
<a href="#" onClick="parent.close()">창닫기</a>
이전 페이지로 가기 <input type="submit" value="이전" onclick="history.back()"> or
<a href="#" onClick="history.back()">이전페이지로</a>
앞 페이지로 가기 <input type="submit" value="앞으로" onclick="history.forward()">
or
<a href="#" onClick="history.forward()">앞 페이지로</a>
새로 고침 <input type="submit" value="새로고침" onclick='top.location="javascript:location.reload()"'>
or
<a href="#"onClick='top.location="javascript:location.reload()"'>새로고침
</a>

한가지 주의할 점은 창닫기 버턴의 경우 가끔씩 "현재보고 있는 창을 닫으시겠습니까?" 라는 자바경고창이 뜨는 경우가 있는데

이 경우는 닫을 려고 하는 창이 새로운 창이 아나라 원래 부모창일 경우 나타나게 됩니다.

위에 설명한 것 하고는 차원이 다른데 비슷한 기능이기 때문에 소스를 하나 소개하겠습니다.

바로 일정시간 이후 자동으로 창이 닫히는 기능을 하는 자바스크립트입니다.

위에 소스를 <head>부분에 집어 넣으시고요.. <body> 부분에는 onLoad="startTime();" 넣는 거 잊지 마세요^^

출처->http://tagmania.net/html/main.php