웹마스터 팁

  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)">  
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
폼의 입력 값의 공백 및 자릿 수 검사 코드 [1] Technician 2002.07.17
사용자가 입력한 키 알아내기(KeyCode) [4] ZipShin 2002.07.16
인터넷익스플로러 타이틀바에 제목나타내기 [3] ZipShin 2002.07.12
해상도가 몇인지를 구해주는 스크립트 [3] ZipShin 2002.07.07
원하는 홈페이지를 시작페이지 설정하기!!!! [3] 오길호 2002.07.05
제목이 계속 바뀝니다. [1] 행복=진만 2002.07.03
간단한 쿠키 &세션 확인용 M2Vis 2002.07.01
input버튼으로 뒤로가기 앞으로 가기 만들어보자~~ [1] ZipShin 2002.06.26
자바스크립트로 메타태그 리프레쉬 효과를 보여주자. [5] ZipShin 2002.06.26
순수 자바스크립트로 작성된 계산기... [2] 용가리 2002.06.22
팝업창에서 부모창 링크 제어하기(노프레임 및 프레임 적용가능) [9] 양지다컴 2002.06.17
접속할때마다 바뀌는 제목표시줄 오토™ 2002.06.16
강추!! 요리조리 날라다니는 놈을 잡아랏...!! ;; [6] 키르(絶對) 2002.06.14
배경색과 글자색같이 변화시키기 2 keymove 2002.06.14
배경색과 글자색같이 변화시키기 keymove 2002.06.14
클릭으로 배경이미지 변경 [4] keymove 2002.06.14
웹상에서도 내맘데로 이미지 크기를 조절할 수 있다?? [9] ▩윤미 2002.06.13
뭐 다 할줄아시겠지만 -_- absolute positioning [3] [º^^º]MISO 2002.06.13
랜덤메시지 + 흐르는 메세지 [4] keymove 2002.06.13
[수정] 랜덤배경음악 + 폼버튼 [1] keymove 2002.06.13
태그 쓰기