반응형
스크립트로 이미지 사이즈를 조정

스크립트를 이용해서 화면에 보여줄 이미지의 크기를 변경하는 소스입니다..  

저같은경우 사진자료실이 있는데 사진자료실의 이미지가 테이블 크기보다 크게되면 사이즈를 줄이는 용도로

만들었습니다..

<script>
function imgSize(which){
    var width = eval("document."+which+".width");
    var height = eval("document."+which+".height");
    var temp = 0;
    var max_width= 600;   // 이미지의 최대 크기    
   
    if ( width > max_width ) {  // 이미지가 600보다 크다면 너비를 600으로 맞우고 비율에 맞춰 세로값을 변경한다.      
       height = height/(width / max_width);
       eval("document."+which+".width = max_width");    
       eval("document."+which+".height = height");
    }    
}
</script>

<html>
<body>
<table>
<tr>
<td width=100 >사진</td>
<td > <img src="../cl_upload/sajin/<%=v_file_nm%>" border=0 name="img"></td>
</tr>
</table>
<script>imgSize("img");</script>
</body>
</html>

!! 주의 할점 :  함수를 호출할때 꼭 이미지가 들어간 테이블밖에서 실행해야
실행됩니다. 테이블을 이용하지 않는다면 바디테그 이후에 넣어줘야 합니다.
간단한 소스인데도. . 찾기가 힘드네여.-_-;

//PHP에서 가져 온거

function UploadImage(iw,ih,j){
alert("");
iWidth=parseInt(eval("document.image"+j+".width"));
iHeight=parseInt(eval("document.image"+j+".height"));
if(iWidth>parseInt(iw) && iWidth>=iHeight){
eval('document.image'+j+'.height=parseInt(iw)/iWidth*iHeight;');
eval('document.image'+j+'.width=parseInt(iw);');
}
if(iHeight>parseInt(ih) && iHeight>iWidth){
eval('document.image'+j+'.width=parseInt(ih)/iHeight*iWidth;');
eval('document.image'+j+'.height=parseInt(ih);');
}
eval('document.image'+j+'.style.visibility="visible";');
}


//


<img src="testimg.gif" name="image1" style="visibility:visible;" onClick="UploadImage('20','30',1)">


참조:http://phpschool.com/bbs2/inc_view.html?id=14193&code=htmlscript2&start=20&mode=search&field=body&search_name=&operator=and&period=all&category_id=&s_que=%C0%CC%B9%CC%C1%F6%2C%C5%A9%B1%E2

[출처] [JavaScript]스크립트로 이미지 사이즈를 조정|작성자 빨갱이


반응형

'프로그래밍 > JAVASCRIPT' 카테고리의 다른 글

[JAVA SCRIPT] WINDOW.OPEN  (0) 2010.09.01
브라우저 정보 알아오기.  (0) 2010.07.20
Textarea에 현제 글자(문자)의 바이트 수를 알아오기  (0) 2010.07.13
Textarea 글자수제한.  (0) 2010.07.13
escape메서드  (0) 2010.07.07
반응형

escape 메서드는 charstring의 내용을 포함한 문자열 값(유니코드 형식)을 반환합니다. 공백과 문장 부호, 악센트 부호가 있는 문자, 그외 비ASCII 문자는 모두 %xx 인코딩으로 바뀝니다. 여기서 xx는 해당 문자를 나타내는 16진수입니다. 예를 들어 공백은 "%20"으로 반환됩니다.

<body>
<script>
str="Aa?ㄱ음";
v="<table border=1><tr><td>idx</td><td>문자</td><td>escape</td><td>charCode</td><td>encodeURI</td></tr>"
for(i=0;i<str.length;i++){
 v+="<tr>";
 v+="<td>"+i+"</td><td>"+str.charAt(i)+"</td><td>"+escape(str.charAt(i))+"</td><td>"+str.charCodeAt(i)+"</td><td>"+encodeURI(str.charAt(i))+"</td>";
 v+="</tr>";
}
v+="</table>";
document.write(v);
</script>

반응형

'프로그래밍 > JAVASCRIPT' 카테고리의 다른 글

[JAVA SCRIPT] WINDOW.OPEN  (0) 2010.09.01
브라우저 정보 알아오기.  (0) 2010.07.20
Textarea에 현제 글자(문자)의 바이트 수를 알아오기  (0) 2010.07.13
Textarea 글자수제한.  (0) 2010.07.13
스크립트로 이미지 사이즈를 조정  (0) 2010.07.12

+ Recent posts

티스토리툴바