웹마스터 팁

  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)">  
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
HTML필수 항목( 기본구조)- 초보자용 입니다! 김수한 2003.07.25
링크 클릭시 점선 없애는 이벤트. 일일히 지정안하고 한꺼번에 되게 하기. [14] 최용근 2003.07.24
링크부분에 밑줄을 없애는 방법.... [10] 공유 2003.07.19
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] file @kihwa 2003.07.11
내 카페/홈페이지에 뉴스 달기 소스 공개 [9] 깜보 2003.07.10
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] file 쭘's 2003.07.07
히야[HIYA] - 노프레임 왕초보가되어 프로젝트 !! [ 노프레임 홈피 만들기 !! 7번째강좌 ] [19] 공찬영 2003.07.05
도메인 주소를 고정한 페이지를 새로고침해도 처음으로 돌아가는것을 방지 ★ [24] 새벽이슬 2003.07.05
반짝이게 해보자 [5] 팩맨24 2003.07.03
[HTML에 필터 적용] 알파 필터 filter: Alpha(Opacity= 적용에 주의할 참고사항들 [2] 김병희 2003.06.28
노프레임 게시판을 만들때 이미지 경로지정 [11] webzang 2003.06.26
새창에서 세로스크롤만 되도록 하기 [10] 윙크벨 2003.06.26
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] file 쭘's 2003.06.16
[매크로] mac_0004 메뉴를 담은 표의 위치와 모양 바꿔치기 매크로 [1] 김병희 2003.06.16
자신이 만든 문서가 HTML(XHTML) 표준에 따르고 있는지 검사해 보는 방법. [6] 귀여운Rootin 2003.06.14
[매크로] 노프레임 페이지 작성시 나모에서 링크 타겟 매크로로 입력하기 [4] 김병희 2003.06.14
펼침메뉴소스 [12] 이성헌 2003.06.08
스크롤바 내맘대루 색바꾸기 [예제추가] [5] ˚ⓢⓘⓔ。 2003.06.07
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [37] file 쭘's 2003.06.07
[re] 쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [5] 파마아줌마 2003.07.21
태그 쓰기