웹마스터 팁

  2. Support
  3. 웹마스터 팁

웹상에서도 내맘데로 이미지 크기를 조절할 수 있다??

2002.06.13 23:19

▩윤미

예제 : http://yoonmi.net/study/study52.htm

==========================================================================
간단설명:(혜림님이 퍼트려주신 (?)

그림을 마우스로 누른 상태에서 좌우로 상하로 움직여 보세요. 그림이 커지고 작아지 겁니다.

○ 이미지 처음 크기를 결정 합니다.
defaultXsize = 100;
defaultYsize = 100;

○ 이미지 조절할 시 가장 작은 사이즈를 결정합니다.
minimumXsize = 50;
minimumYsize = 50;

○ 이미지 조절할 시 가장 큰 사이즈를 결정합니다.
maximumXsize = 250;
maximumYsize = 250;

===========================================================================

소스 입니다.

===========================================================================

///////////////////////////////////////////////////////////////////////////////

<head> 와 </head> 사이에 입력하세요.

///////////////////////////////////////////////////////////////////////////////

<script language="JavaScript">
defaultXsize = 100;
defaultYsize = 100;

minimumXsize = 50;
minimumYsize = 50;

maximumXsize = 250;
maximumYsize = 250;

iBeReady = false;

function dragResizeImage(dragEvent,which){
if (iBeReady){
posX = eval("document."+which+".offsetLeft");
posY = eval("document."+which+".offsetTop");
newXsize = dragEvent.x;
newYsize = dragEvent.y;
newXsize = newXsize - posX;
newYsize = newYsize - posY;
if (newXsize >= maximumXsize) newXsize = maximumXsize;
if (newYsize >= maximumYsize) newYsize = maximumYsize;
if (newXsize <= minimumXsize) newXsize = minimumXsize;
if (newYsize <= minimumYsize) newYsize = minimumYsize;
eval("document."+which+".width=newXsize");
eval("document."+which+".height=newYsize");
}
}

function clickResetImageSize(which){
if (iBeReady){
eval("document."+which+".width=defaultXsize");
eval("document."+which+".height=defaultYsize");
}
}

</script>



//////////////////////////////////////////////////////////////////////

<body> 안에 추가시켜주세요.

//////////////////////////////////////////////////////////////////////

<body onload="iBeReady=true;">  



/////////////////////////////////////////////////////////////////////

<body> 와 </body>사이에 추가해주세요.

/////////////////////////////////////////////////////////////////////

<img src="그림주소"
name="imageOne"
width="100" height="100"
onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">  
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기