이미지를 마우스로 크기 조정가능하게
<!---- [1단계] 아래의 소스코드를 <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>
<!------------------------- 여기까지 ---------------------------------->
</HEAD>
<!---- [2단계] <BODY> 태그안에 있는 코드를 복사 해 넣으세요 --------------->
<body onload="iBeReady=true;">
<!------------------------- 여기까지 ---------------------------------->
<p><b>마우스로 이미지 크기를 조절 해 보세요</b></p>
<!---- [3단계] 아래의 코드를 <BODY> 태그와 </BODY> 태그안에 붙여 넣으세요 ---->
<img src="../img6.jpg"
name="imageOne"
width="100" height="100"
onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">
<!------------------------- 여기까지 ---------------------------------->
</BODY>
<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>
<!------------------------- 여기까지 ---------------------------------->
</HEAD>
<!---- [2단계] <BODY> 태그안에 있는 코드를 복사 해 넣으세요 --------------->
<body onload="iBeReady=true;">
<!------------------------- 여기까지 ---------------------------------->
<p><b>마우스로 이미지 크기를 조절 해 보세요</b></p>
<!---- [3단계] 아래의 코드를 <BODY> 태그와 </BODY> 태그안에 붙여 넣으세요 ---->
<img src="../img6.jpg"
name="imageOne"
width="100" height="100"
onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">
<!------------------------- 여기까지 ---------------------------------->
</BODY>
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 3개