호빵홈 소스자료실
현재위치 : hobbang.co.kr > 소스자료실
소스자료실은 홈페이지를 만들거나 꾸밀 수 있는 자바스크립트와 HTML 소스를 제공합니다.
또한 컴퓨터와 인터넷을 사용하면서 유용한 Tip도 제공하니 각 Category를 선택하세요.

Category

  (Homepage)님의 글입니다.
줌(Zoom) 효과로 새창이 열리는 소스 2003-07-02 07:45:50, 조회 : 3,482, 추천 : 20

설명을 이해하지 않고 그대로 복사해 가는 경우라면 설명의 출처를 http://hobbang.co.kr 이라고 표기해주시구요.. 자신이 이해하고 이 설명을 참고해서 자신의 홈에 올리는 경우라면 출처 안밝혀도 상관 없습니다.. ^^


▶ 예제 보기




실행화면에서 [호빵홈]을 클릭해 보세요.. 줌 효과로 창이 열린 것입니다..



▶ 자바스크립트 소스 보기

자바스크립트 소스의 내용은 특별히 수정할 것 없도록 해놓았습니다..
아래 검은색 버튼을 누르면 내용이 복사되니 메모장을 실행한 후 붙여넣기 하여 .js 파일로 저장한 후 자신의 홈에 올리고 사용하세요..
자바스크립트 소스를 보고 싶은 분 역시 아래 메모장에서 붙여넣기 한 내용을 보고 분석하기 바랍니다..



▶ HTML 태그 소스 보기

아래 박스 안의 파란 글 내용이 HTML 태그 소스입니다..

<body>
     스크립트 소스는 이곳에 써줍니다

<a href="http://hobbang.co.kr" onclick="zoomBox(event,this,775,500,0,-100); return false">호빵홈</a>




▶ HTML 태그 소스 설명

스크립트를 .js 파일로 만들지 않고 HTML 문서에서 <script> 태그로 직접 쓰는 경우에는 위의 HTML 태그 소스 중 "스크립트 소스는 이곳에 써줍니다" 라는 문장을 지우고 그 곳에 자바스크립트 소스를 반드시 써줘야 합니다..
  • 자바스크립트 소스를 .js 파일로 만들지 않고 <script> 태그로 불러와 사용하려면 다음과 같이 씁니다..

    <script language="javascript">
        위에서 복사한 자바스크립트 소스 내용
    </script>


    스크립트를 .js 파일로 따로 만들어서 사용하고 HTML 문서에서는 <script src="js파일주소">로 사용할 경우에는 아래처럼 합니다.
  • 자바스크립트 소스를 .js 파일로 만들어서 사용할 경우에는 .js 파일은 자신의 홈에 파일 올리기나 FTP 기능으로 올린 후에 <script> 태그로 불러와 사용합니다..

    <script language="javascript" src=".js파일의주소"></script>




    HTML 태그의 실제적인 소스 설명 부분입니다.
  • <a href="http://hobbang.co.kr" onclick="zoomBox(event,this,775,500,0,-100); return false">호빵홈</a> : 클릭했을 때 새 창 줌 효과로 열리게 하려면 자바스크립트 소스에 있는 zoomBox() 함수를 클릭했을 때(onclick) 실행해 줘야 합니다.. 그리고 함수를 실행할 때에는 zoomBox(event, this, 새창가로크기, 새창세로크기, 창이나타날가로위치, 창이나타날세로위치)를 지정해 줘야 합니다.. 창이 나타날 위치는 화면을 기준으로 한 위치가 아니며 클릭을 한 링크 태그 내용이 나타난 위치를 기준으로 합니다.. 그래서 -100이라고 하면 클릭한 내용(여기서는 '호빵홈')의 왼쪽 또는 위쪽으로 100픽셀(px) 떨어진 곳이 새 창의 왼쪽 위 모서리 부분이 되는 것이랍니다.. 잘 이해가 안된다면 예제실행 창을 움직이면서 '호빵홈' 글자를 클릭해 보세요.. 새창도 다른 위치에 나타날 것입니다..


  • 여러 링크된 곳을 클릭할 때마다 이 효과로 각각 새 창을 열고 싶다면 각 링크마다 위의 <a> 태그에서처럼 zoomBox()를 실행하면 됩니다..


    ▶ 참고

    현재 소스에서는 같은 링크 부분이라도 클릭을 할 때마다 항상 새 창이 다시 나타납니다.. 이것을 새 창은 처음에 한 번만 나타나고 그 창을 닫지 않으면 다른 내용은 항상 열린 새창에서 보여주게 하고 싶다면 자바스크립트 소스 부분에서
    var w=window.open(zLink.href,'','width='+maxW+',height='+maxH+',left='+adjX+',top='+adjY+',scrollbars=yes');
    부분을 찾으세요..(소스의 아래부분에 있습니다)
    해당 부분을 찾았다면 빨간색으로 표시한 zLink.href,'' 부분에 있는 ''에 새창의 이름을 영어단어로 지정해 주세요.. zLink.href,'newWin' 처럼 '' 안에 새창의 이름을 적어주면 됩니다..
    window.open()으로 창을 열 때 해당 이름을 가진 창이 열려 있는 경우라면 다시 창을 열지 않고 그 창에 내용을 보여주는데 이 소스에서도 창의 이름을 지정해 주면 같은 기능이 적용되는 것입니다..




    2020-08-13
    17:18:34


      추천하기   목록보기

    현재글을 이메일로 보내기

    No 제 목 글쓴이 작성일 조회
       1
     
    Copyright 1999-2020 Zeroboard / skin by Praise Jesus
    Copyright ⓒ 1998~ . Hobbang.co.kr. All rights reserved.