웹마스터 팁
웹상에서도 내맘데로 이미지 크기를 조절할 수 있다??
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)">
==========================================================================
간단설명:(혜림님이 퍼트려주신 (?)
그림을 마우스로 누른 상태에서 좌우로 상하로 움직여 보세요. 그림이 커지고 작아지 겁니다.
○ 이미지 처음 크기를 결정 합니다.
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)">
댓글 9
-
document
2002.06.13 23:21
+_+ -
document
2002.06.13 23:22
윤미님 야햏햏가 아니라 아햏햏입니다. -
아기구더기
2002.06.13 23:56
아햏햏의 압박 -
▩윤미
2002.06.14 01:09
야햏햏이 더 좋소 -_- -
{동준짱}
2002.06.14 01:21
어라? 야자바 스크립트 아니예요? 메일링 들어온거랑 똑같은데요~ㅜ,,ㅜ -
▩윤미
2002.06.14 13:46
아 그래요? ^^ 저희집에 누가 팁 올려주셔서 빼왔는데~ -
마니
2002.06.17 22:33
와아 신기해라!!! -
박선재
2002.06.24 19:04
좋다 +_+ -
김태윤
2003.02.25 00:07
와.. 신기하네요;
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
자바스크립트 이해하기...1
[13]
 | Eccen | 2002.05.26 |
|
자바스크립트 이해하기...2
[1]
| Eccen | 2002.05.30 |
| 어설픈 링크방지[정확한 경로로 오세요] [5] | 이성영 | 2002.05.30 |
|
마우스에 축구공 따라다니는 자바 스크립트..
[6]
| MR.HMH | 2002.05.30 |
| 서서히 이미지를 변경시켜주는 환상적인 룰오버효과 [7] | ▩윤미 | 2002.05.31 |
|
자바스크립트 이해하기...3
[1]
| Eccen | 2002.06.05 |
| 플래쉬 효과나는 신비 메뉴 - -? *수정+카피라이터~ [17] | ▩윤미 | 2002.06.09 |
| 부드럽게 스크롤바를 따라다니는..+_+ [6] | 키르(絶對) | 2002.06.13 |
| 원하는시간에 팝업창을 띄우고 원하는 시간에 닫어뻐리는;; [2] | 키르(絶對) | 2002.06.13 |
| [수정] 랜덤배경음악 + 폼버튼 [1] | keymove | 2002.06.13 |
| 랜덤메시지 + 흐르는 메세지 [4] | keymove | 2002.06.13 |
| 뭐 다 할줄아시겠지만 -_- absolute positioning [3] | [º^^º]MISO | 2002.06.13 |
| 웹상에서도 내맘데로 이미지 크기를 조절할 수 있다?? [9] | ▩윤미 | 2002.06.13 |
| 클릭으로 배경이미지 변경 [4] | keymove | 2002.06.14 |
| 배경색과 글자색같이 변화시키기 | keymove | 2002.06.14 |
| 배경색과 글자색같이 변화시키기 2 | keymove | 2002.06.14 |
| 강추!! 요리조리 날라다니는 놈을 잡아랏...!! ;; [6] | 키르(絶對) | 2002.06.14 |
| 접속할때마다 바뀌는 제목표시줄 | 오토™ | 2002.06.16 |
| 팝업창에서 부모창 링크 제어하기(노프레임 및 프레임 적용가능) [9] | 양지다컴 | 2002.06.17 |
| 순수 자바스크립트로 작성된 계산기... [2] | 용가리 | 2002.06.22 |