Where The Streets Have No Name

이미지의 크기에 따라 유동적으로 창을 변화시키기 본문

Developement/Web

이미지의 크기에 따라 유동적으로 창을 변화시키기

highheat 2006. 4. 2. 03:34

opner 페이지에서----------------------------------------------
OpenWin function은 세개의 인자를 가집니다.
하나는 주소이고 가로와 세로의 길이를 가집니다.
이때 스크롤을 안생기게 하고 싶다면 scrollbars=no로 설정하세요
새창이 뜨는 위치를 조절하고 싶으시다면
top=150,left=250
요부분을 조절하세요

<script language="javaScript">
<!--
function OpenWin(URL,width,height) {
   var str,width,height;
     str="'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no,";
     str=str+"width="+width;
     str=str+",height="+height+"',top=150,left=250";
     window.open(URL,'remote',str);
}
// -->
</script>

<input type="button" name="imgList_bt" value="이미지관리" onclick="OpenWin('imageMng.asp?gidx=<%=gidx%>&iStatus=imgList',100,100)">
------------------------------------------------------------

 

새창에서----------------------------------------------------
아래 보면 이런 저런 지져분합니다.
아래의 예는
가로,세로가 둘중 하나는 사이즈가 100인거
가로,세로가 둘중 하나는 사이즈가 200인거
가로,세로가 둘중 하나는 사이즈가 480인거
이렇게 세가지*2 의 크기가 필요할때 각각 거기에 맞게 조절하기 위한 예입니다.
또한 여기서 고려 되어 지는 사이즈는 문서를 이루는 여백과 기타...
직접 해보시면 됩니다.

<script language="javascript">
<!--
function init(){
   var myImg;
   myImg = document.images[0];
   imgWidth  = myImg.width;
   imgHeight = myImg.height;
 
   if (imgWidth<=100 && imgWidth > imgHeight) {
     imgWidth  = imgWidth+340;
     imgHeight = imgHeight+130;
   }else if (imgHeight<=100 && imgWidth < imgHeight) {
     imgWidth  = imgWidth+360;
     imgHeight = imgHeight+130;
   }else if (imgWidth<=200 && imgWidth > imgHeight) {
     imgWidth  = imgWidth+240;
     imgHeight = imgHeight+130;
   }else if (imgHeight<=200 && imgWidth < imgHeight) {
     imgWidth  = imgWidth+360;
     imgHeight = imgHeight+130;
   }else if (imgWidth<=480 && imgWidth > imgHeight) {
     imgWidth  = imgWidth+80;
     imgHeight = imgHeight+130;
   }else if (imgHeight<=480 && imgWidth < imgHeight) {
     imgWidth  = imgWidth+60;
     imgHeight = imgHeight+130;
   }
   window.resizeTo(imgWidth,imgHeight);
}
// -->

</script>

<body onload="init()">
<img src="/upload/productsImg/<%=img%>" border=0>
</body>
------------------------------------------------------------

단순한 예제
이미지 크기에 맞는 창조절만 하고 싶으시다면

<script language="javascript">
<!--
function init(){
   var myImg;
   myImg = document.images[0];
   imgWidth  = myImg.width;
   imgHeight = myImg.height;
   window.resizeTo(imgWidth+40,imgHeight+40);
}
// -->

</script>

'Developement/Web' Related Articles more