웹상에서 이미지 크기 마음대로 조절하고 놀기
페이지 정보
작성일13-02-28 00:58 조회1,538회관련링크
- 예제파일 1027회 연결
본문
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="/script/style.css" type="text/css">
<title>웹상에서 이미지 사이즈 조절하기</title>
<script language="JavaScript">
defaultXsize = 100;
defaultYsize = 100;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="/script/style.css" type="text/css">
<title>웹상에서 이미지 사이즈 조절하기</title>
<script language="JavaScript">
defaultXsize = 100;
defaultYsize = 100;
minimumXsize = 50;
minimumYsize = 50;
minimumYsize = 50;
maximumXsize = 400;
maximumYsize = 284;
maximumYsize = 284;
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");
}
}
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");
}
}
if (iBeReady){
eval("document."+which+".width=defaultXsize");
eval("document."+which+".height=defaultYsize");
}
}
</script>
</head>
</head>
<body onload="iBeReady=true;">
<center><br /><br />
<img src="http://madalla.kr/script/img/c1.jpg" name="imageOne" width="180" height="180" onDrag="dragResizeImage(event,this.name)" onClick="clickResetImageSize(this.name)">
<center><br /><br />
<img src="http://madalla.kr/script/img/c1.jpg" name="imageOne" width="180" height="180" onDrag="dragResizeImage(event,this.name)" onClick="clickResetImageSize(this.name)">
<br ><br />
그림을 마우스로 누른 상태에서 좌우로 상하로 움직여 보세요. 그림이 커지고 작아지 겁니다.
그림을 마우스로 누른 상태에서 좌우로 상하로 움직여 보세요. 그림이 커지고 작아지 겁니다.
</body>
</html>
</html>
