이미지 자동 리사이즈 관련 함수

현제 여기게 사용된 게시판에 적용되어있습니다.

사용법

<img src=http://www.mins01.com/for2007/image_manager/middle/top/thisisweb.gif
onload="image_auto_resize(this,50,50);"
onmouseover="image_auto_resize(this,50,50);">
지정된 이미지에 자동 리사이즈를 적용합니다.

사용법2

 image_auto_resize_inarea(document.getElementById('div_area'),100,'',true);
document.getElementById('div_area') 안에서의 모든 img에 자동 리사이즈를 적용합니다.

//============================================================================
// 이미지 자동 리사이즈
//============================================================================
function image_auto_resize(this_s,width,height){
 var ta_image = new Image();
 ta_image.src = this_s.src;
  if(!width){this_s.removeAttribute('width');
  this_s.style.width='auto';}
  else if(width < ta_image.width){
   this_s.width = width;
  }else{
   this_s.width = ta_image.width;
  }
  if(!height){this_s.removeAttribute('height');
  this_s.style.height='auto';}
  else if(height < ta_image.height){
   this_s.height = height;
  }else{
   this_s.height = ta_image.height;
  } 
}

function image_auto_resize_inarea(this_s,width,height,view){ 
//this_s안의 모든 이미지는 자동 리사이즈 된다.
 //alert(this_s.childNodes.length);
 if(!view){view=true;}
 if(!this_s){return;}
 if(this_s.nodeType!=1){return;}
 for(var i=0,m=this_s.childNodes.length;i<m;i++){
  var ta = this_s.childNodes[i];
  
  if(ta.nodeName=='IMG'){
   //ta.style.border='1px solid #333333';   
   image_auto_resize(ta,width,height);

   if(view){
    if(!ta.title){ta.title=ta.src;}
    if(!ta.onclick){
     ta.style.cursor='pointer';
     ta.onclick=function(){js_image_view(this,1);}
    }
    if(!ta.onload) 
     ta.onload=function(){image_auto_resize(this,width,height);}
    if(!ta.onmouseover)   
     ta.onmouseover=function(){image_auto_resize(this,width,height);}
   }
  }
  if(ta.childNodes.length>0){
   image_auto_resize_inarea(ta,width,height);
  }
 }
 return;

}

 

사용 제약은
"공대여자는 이쁘다"를  나타내야 쓸 수 있습니다.

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.11
5.12
5.13
5.14
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1