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

Category

  (Homepage)님의 글입니다.
그림을 클릭하면 그림이 새 창에 나타나게 하는 소스 2003-07-15 04:25:57, 조회 : 2,966, 추천 : 21

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


그림을 클릭하면 새창에 클릭한 그림이 나타나게 하는 소스입니다..

▶ 예제 소스
  • 예제 소스
    <img src="http://hobbang.co.kr/hoddong/images/dance-4.gif" width="112" height="103" style="cursor: hand" onclick="window.open(this.src)">

  • 예제 소스 실행 (그림을 클릭해 보세요)




    ▶ 태그 소스 설명
    아래 파란색 내용이 태그 소스입니다..
    ----------------------------------------------------------------------
    <img src="그림주소" style="cursor: hand" onclick="window.open(this.src)">
    ----------------------------------------------------------------------

  • src="그림주소" : 그림의 주소를 지정하는 것입니다.. 아직까지도 그림 태그인 IMG 태그를 쓸 때 잘못하시는 부분이 이 그림주소 지정하는 부분인데 그림주소는 http:// 로 시작되는 인터넷에 올려진 그림의 주소를 써주는 것입니다.. file:/// 로 시작하거나 c:\ 처럼 시작하는 자신의 컴퓨터에 있는 파일을 사용한 주소가 아닙니다.. 그렇게 사용하면 자신의 컴에 있는 그림이라서 자신에게는 보이지만 다른 컴퓨터에서는 그림이 보이지 않게 됩니다..

  • width="100" height="100" : 그림의 가로(width), 세로(height) 크기를 지정하는 것입니다.. 그림의 크기를 지정하지 않으면 그림의 원래 크기로 보여지게 됩니다.. 하지만 이 소스처럼 그림을 클릭했을 때 원래 그림의 크기대로 화면에 보여주려는 것이라면 그림을 작게 보여주는 것이 낫기 때문에 크기를 일부러 작게 지정한 것입니다.. 크기는 픽셀(px=pixel) 단위로 지정하는 것은 아시죠?

  • style="cursor: hand" : 그림 위에 마우스를 올렸을 때 링크된 것처럼 마우스 포인터(커서) 모양이 손 모양으로 보이게 해 주는 스타일 지정 기능입니다.. 다른 스타일도 추가로 지정하고 싶다면 ; 를 쓰고 뒤에 추가로 써 주면 됩니다.. style="cursor: hand; 스타일; 스타일..." 처럼요..

  • onclick="window.open(this.src)" : 그림을 클릭하면(onclick) 새창을 열어서(window.open) 현재 태그의 소스(this.src)를 보여주라는 것입니다.. 이 태그에서 소스(src=source)는 그림이 되는 것이죠..


    ▶ 태그 소스 응용
  • 열린 새창이 있는 경우에 새창이 다시 열리지 않기
    현재 소스에서는 그림을 클릭하면 새 창이 항상 새롭게 열립니다.. 이것은 window.open() 매소드를 약간만 수정하면 됩니다..

    onclick="window.open(this.src, 'imgwin')"

    위의 수정한 소스에서 'imgwin'은 창의 이름을 지정한 것입니다.. 원래의 소스에서는 창의 이름이 없기 때문에 항상 새 창을 여는 것이 문제였는데 이렇게 이름을 지정하면 같은 이름의 열린 창이 있는 경우에는 그 창에 내용을 새롭게 보여주고 새 창이 다시 열리지 않게 해줍니다.. 물론 처음에는 지정된 이름의 창이 없기 때문에 새 창이 열립니다..


  • 창의 속성 변경해 주기
    현재 소스에서는 항상 "메뉴", "도구 모음" 등이 나타나는 보통의 창 모양입니다.. 이것을 보통 팝업창으로 나타나는 것처럼 "메뉴", "도구 모음", "상태표시줄" 등이 나타나지 않게 할 수 있습니다.. 역시 이것도 window.open() 매소드에서 지정하는 것입니다..

    onclick="window.open(this.src, 'imgwin', 'width=400, height=300, scrollbars=auto, resizable=yes')"

    소스에 보면 창의 이름 뒤에 , 를 기준으로 ' ' 안의 창의 속성 설정 내용이 추가된 것을 볼 수 있을 것입니다.. 따옴표 안에 들어 있는 것을 앞에서부터 해석해 보면 '창의 가로크기, 세로크기, 창의 스크롤바 여부, 창의 크기 변화 여부' 입니다.. 창의 가로와 세로 크기는 여러 그림을 보여주는 경우에 각 그림의 크기가 다를 수 있으므로 적당한 크기를 지정해 주면 되고 창의 크기보다 큰 그림을 보여줄 수 있으므로 스크롤바가 가 나타나도록 scrollbars=auto 로 지정을 해줍니다..(스크롤바가 절대 나타나지 않게 하려면 auto 대신 yes를 입력) 창의 오른쪽 위에 나타나는 창 크기 조절 버튼 중 창의 크기를 조절하는 버튼도 그림의 사이즈가 다를 수 있으므로 필요에 따라 조절할 수 있도록 resizable=yes로 지정했습니다.. 그림의 크기가 일정해서 창 크기 조절 버튼이 없어도 된다면 resizable=no로 지정하세요.. 그리고 소스를 고치다가 많이 실수하는 부분인데 ' ' 안에는 다시 따옴표를 쓰지 못하고 " " 안에는 다시 큰 따옴표를 쓰지 못합니다.. 꼭 쓰고 싶은 경우에는 안에서 사용하는 (큰)따옴표 앞에는 \를 붙여서 사용해야 합니다. ( 예: \', \" ) 현재 이 소스에서도 window.open()을 둘러싸고 있는 것이 " " 이기 때문에 () 안에서는 작은 따옴표만을 사용했습니다. 그리고 작은 따옴표는 창의 이름(imgwin)과 그 뒤에 쓰는 window.open()에서 지정하는 창의 속성 설정 내용은 하나의 ' ' 안에 들어 있습니다.. 따옴표 하나를 잘못 쓰게 되면 페이지 전체에 오류가 나타날 수 있으므로 항상 따옴표 쓰는 것에 주의를 해야 합니다..


  • 작은 그림과 큰 그림 파일이 각각 있을 때..
    보통 이런 기능은 화면의 로딩 속도나 트래픽 등의 문제로 인해 작은 그림 파일과 작은 그림을 클릭했을 때 보여주는 큰 그림 파일로 각각 파일들을 링크해서 사용을 합니다.. 이 소스에서도 그림 파일을 각각 지정을 한다면 다음과 같이 수정합니다..

    <img src="작은그림파일주소" style="cursor: hand" onclick="window.open('큰그림파일주소', 'imgwin', 'width=400, height=300, scrollbars=auto, resizable=yes')">

    이 소스에서 보면 src="그림주소" 에서 작은 그림 파일의 주소를 지정하고 window.open()에서 this.src 라는 부분 대신 실제로 새 창에서 불러올 그림 파일의 주소를 ' ' 안에 지정했습니다.. window.open()에서는 창의 크기와 스크롤바, 창 조절 버튼 등에 대한 속성은 그림에 맞게 바꿔주면 됩니다..


  • 각 그림마다 window.open()을 반복해서 써주기 귀찮을 때..
    각 그림에서 window.open()에서 지정하는 것이 파일의 주소만 바뀌던지 아니면 this.src로 사용해서 매 번 반복되어 쓰게 된다면 HTML 문서의 내용이 길어지고 귀찮아집니다.. 이런 경우에는 script 태그로 자바스크립트 함수를 따로 만들어서 불러오면 됩니다..

    <script language="javascript">
    function imgwin(imgsrc) {
    window.open(this.src, 'imgwin', 'width=400, height=300, scrollbars=auto, resizable=yes');
    }
    </script>


    이런 자바스크립트 소스를 만든 후에 img 태그에서는 다음처럼만 지정해 주면 됩니다..

    <img src="그림주소1" style="cursor: hand" onclick="imgwin(this.src)">
    또는
    <img src="그림주소1" style="cursor: hand" onclick="imgwin('그림주소2')">


    img 태그의 onclick에서는 자바스크립트 소스에 있는 imgwin() 이라는 함수를 실행시키면서 새 창에 나타날 그림의 주소를 보내서 window.open()을 실행하는 것입니다.. onclick의 imgwin()에서 this.src를 지정할 때에는 따옴표가 붙지 않고 그림주소를 지정할 때에는 따옴표가 붙는 것 주의하세요..



    이 소스를 쓰다가 모르는 것은 질문/답변 게시판에 질문해 주세요.. 고기를 낚아주지는 않지만 고기를 낚는 방법은 답변해 드리겠습니다..


    참고)
    자바스크립트 소스 부분을 여러 문서에서 자주 불러다 사용한다면 script 태그 역시 매번 문서마다 다시 써 주는 것이 귀찮을 것입니다.. 그런 경우에는 자바스크립트 소스의 function imgwin() { ~~ } 부분을 .js 파일로 만들어 홈에 올려 놓고 사용하세요..



  • 2020-08-13
    16:53:38


      추천하기   목록보기

    현재글을 이메일로 보내기

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