이미지 크기에 맞춰지는 팝업창_이미지 특수효과

방문자에게 이 기능을 제공해야 하는 경우가 많습니다. 방문자가 페이지의 썸네일을 클릭하면 해당 전체 크기 이미지가 방문자가 볼 수 있도록 새 팝업 창에 표시됩니다.

이 기능을 구현하는 가장 간단한 방법은 다음 HTML 코드를 사용하여 이미지 링크를 생성하는 것입니다.

여기서 태그의 href 속성은 전체 크기 이미지를 지정합니다. URL, target 속성은 이미지가 새 창에 표시되도록 지정하기 위해 _blank로 설정됩니다. 태그의 src 속성은 썸네일의 URL을 지정합니다.

전체 크기 이미지를 표시하는 창의 모양을 어느 정도 제어하려는 경우(예를 들어 팝업 창의 높이와 너비를 전체 이미지 크기와 일치시키려는 경우) -size 이미지), window.open 메소드를 호출할 수 있습니다. 이 메소드는 열려는 파일의 URL, 창 이름 및 창 속성을 지정하는 세 가지 매개변수를 받습니다. 창 속성 매개변수에서 높이를 지정할 수 있습니다. 창의 너비, 메뉴 표시줄, 도구 모음 등을 표시할지 여부. 다음 코드는 도구 모음, 주소 표시줄, 상태 표시줄 또는 메뉴 표시줄이 없는 창에 너비와 높이가 각각 400과 350인 전체 크기 이미지를 표시합니다.


여기서 질문이 제기됩니다. 모든 원본 크기 이미지가 균일한 크기(예: 400x350)인 경우 위 코드는 모든 축소판 이미지 링크에 적용됩니다( href 속성이 다릅니다). 그러나 전체 크기 사진의 크기가 균일하지 않은 경우 위 코드를 계속 사용한다면 먼저 각 전체 크기 사진의 크기를 얻은 다음 높이와 너비를 올바른 값으로 설정해야 합니다. window.open 메소드의 창 속성 매개변수를 하나씩 사용하면 이미지 수가 많을 때 너무 비효율적입니다. 그렇다면 팝업 창이 표시할 이미지 크기에 자동으로 맞춰지도록 하는 영구적인 방법이 있습니까? 연구를 통해 우리는 목적을 달성하기 위해 DHTML의 Image 객체를 사용할 수 있다는 것을 발견했습니다. Image 객체는 너비와 높이 속성을 읽어서 로드된 이미지의 크기를 얻을 수 있습니다. 팝업 창 크기를 설정하면 이미지 크기에 맞는 팝업 창을 구현할 수 있습니다. 구현 코드는 다음과 같습니다.

사용 시 웹 문서의 태그 쌍에 위 코드를 넣은 후, OpenFullSizeWindow 함수를 호출합니다.
과 같은 링크의 클릭 이벤트입니다. <script> <BR><!-- <BR>var imgObj; <BR>function checkImg(theURL,winName){ <BR>// 对象是否已创建 <BR>if (typeof(imgObj) == "object"){ <BR>// 是否已取得了图像的高度和宽度 <BR>if ((imgObj.width != 0) && (imgObj.height != 0)) <BR>// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度，并打开该窗口 <BR>// 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量 <BR>OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30)); <BR>else <BR>// 因为通过 Image 对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查 <BR>setTimeout("checkImg('" + theURL + "','" + winName + "')", 100) <BR>} <BR>} <br><br>function OpenFullSizeWindow(theURL,winName,features) { <BR>var aNewWin, sBaseCmd; <BR>// 弹出窗口外观参数 <BR>sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,"; <BR>// 调用是否来自 checkImg <BR>if (features == null || features == ""){ <BR>// 创建图像对象 <BR>imgObj = new Image(); <BR>// 设置图像源 <BR>imgObj.src = theURL; <BR>// 开始获取图像大小 <BR>checkImg(theURL, winName) <BR>} <BR>else{ <BR>// 打开窗口 <BR>aNewWin = window.open(theURL,winName, sBaseCmd + features); <BR>// 聚焦窗口 <BR>aNewWin.focus(); <BR>} <BR>} <BR>//--> <BR></script> 위 코드는 IE 5.x-6.0에서 테스트되었습니다.