웹마스터 팁
웹상에서도 내맘데로 이미지 크기를 조절할 수 있다??
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
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| What is the MRTG? [4] | Dopesoul | 2002.09.06 |
| 강좌는 아니지만, 제가 쓸 강좌가 어떤방향으로 나아가야하는지를 잘 모르겠습니다. 그래서 글올립니다. [4] | Dopesoul | 2002.09.06 |
| 웹호스팅의 꽃 APM 완벽설치 가이드 (linux) | BJ | 2002.09.05 |
| 포트 번호 없이 도메인 연결하기. [15] | Winnie | 2002.08.27 |
| 남구스의 DB 백업 쉘 스크립 [1] | 김남규 | 2002.08.27 |
| 남구스의 DNS/POP3/계정추가 쉘스크립 [2] | 김남규 | 2002.08.27 |
| 웹호스팅의 꽃 A.P.M.~ 을 알아보자! (1부) [9] | 임현 | 2002.08.25 |
| 무단링크를 방지하여 트래픽을 줄이기(아파치) [5] | 착한마음™ | 2002.08.24 |
| APM 자동설치 프로그램 [4] | Captain DirtBuster | 2002.08.24 |
| 웹호스팅 세팅기 1편 - 설치하기(2부) [3] | 임현 | 2002.08.22 |
| 웹호스팅 세팅기 1편 - 설치하기(1부) [16] | 임현 | 2002.08.22 |
| win2k, apache2.0.40 + php-4.2.2로 업글하기 | ZIO | 2002.08.20 |
| [APM설치]윈도우에서 웹서버 세팅하기 [49] | 김영남 | 2002.08.14 |
| 루트만 이용할수있게 바꿔야하는 명령어들 몇가지 [3] | 임현 | 2002.08.14 |
| 웹호스팅 세팅기 [8] | 임현 | 2002.08.13 |
MSSQL 2000 Enterprise Edition 설치하기
[7]
 | DearMai | 2002.08.12 |
|
FTP 에 사용자추가후 로그인부분 추가하기 - 로그인 부분
[2]
| DearMai | 2002.08.12 |
|
FTP 에 사용자추가후 로그인부분 추가하기 - 사용자추가부분
[5]
| DearMai | 2002.08.12 |
| VMware로 윈도우에서 리눅스 설치하기 [8] | 강민 | 2002.08.05 |
|
IIS 해당 IP를 제외한 모든 컴퓨터 접근 금지시키기
[1]
| 오픈소스 | 2002.08.04 |