그림1,그림2 모두 동시에 확대와 축소가 적용되게 하려면?
아래는 그림을 확대/축소하는 스크립트입니다.
확대/축소 버튼을 누르면 그림1만 확대/축소가 되는데요.
확대/축소 버튼을 눌렀을때, 그림1,그림2 모두 동시에 확대/축소가 작동되도록 하려면
어떻게해야 될까요?
<INPUT TYPE="button" STYLE="width:50; height:50;" onfocus="this.blur();" VALUE="확대" onmouseup="zoomInAndOut('in')">
<INPUT TYPE="button" STYLE="width:50; height:50;" onfocus="this.blur();" VALUE="축소" onmouseup="zoomInAndOut('out')">
<br>
<img id="myImage" src="그림1.jpg" border="0">
<img id="myImage" src="그림2.jpg" border="0">
<SCRIPT>
function zoomInAndOut(string) {
var image = document.getElementById("myImage")
var currentWidth = image.width;
var currentHeight = image.height;
if (string == "in") {
var width = parseInt(currentWidth * 1.025); //2.5%씩 넓이 증가
var height = parseInt(currentHeight * 1.025); //2.5%씩 높이 증가
}
else if (string == "out") {
var width = parseInt(currentWidth * 0.97); //2.5%씩 넓이 감소
var height = parseInt(currentHeight * 0.97); //2.5%씩 높이 감소
}
image.width = width;
image.height = height;
}
</SCRIPT>
확대/축소 버튼을 누르면 그림1만 확대/축소가 되는데요.
확대/축소 버튼을 눌렀을때, 그림1,그림2 모두 동시에 확대/축소가 작동되도록 하려면
어떻게해야 될까요?
<INPUT TYPE="button" STYLE="width:50; height:50;" onfocus="this.blur();" VALUE="확대" onmouseup="zoomInAndOut('in')">
<INPUT TYPE="button" STYLE="width:50; height:50;" onfocus="this.blur();" VALUE="축소" onmouseup="zoomInAndOut('out')">
<br>
<img id="myImage" src="그림1.jpg" border="0">
<img id="myImage" src="그림2.jpg" border="0">
<SCRIPT>
function zoomInAndOut(string) {
var image = document.getElementById("myImage")
var currentWidth = image.width;
var currentHeight = image.height;
if (string == "in") {
var width = parseInt(currentWidth * 1.025); //2.5%씩 넓이 증가
var height = parseInt(currentHeight * 1.025); //2.5%씩 높이 증가
}
else if (string == "out") {
var width = parseInt(currentWidth * 0.97); //2.5%씩 넓이 감소
var height = parseInt(currentHeight * 0.97); //2.5%씩 높이 감소
}
image.width = width;
image.height = height;
}
</SCRIPT>
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 5개
아래의 소스로 되면
이미지 갯수 부분은 사용하시고자 하는대로 설정해 주세요.
<img id="myImage1" src="그림1.jpg" border="0">
<img id="myImage2" src="그림2.jpg" border="0">
<SCRIPT>
function zoomInAndOut(string) {
for($i = 1; $i <3; i++) {
var image = document.getElementById("myImage"+i)
var currentWidth = image.width;
var currentHeight = image.height;
if (string == "in") {
var width = parseInt(currentWidth * 1.025); //2.5%씩 넓이 증가
var height = parseInt(currentHeight * 1.025); //2.5%씩 높이 증가
}
else if (string == "out") {
var width = parseInt(currentWidth * 0.97); //2.5%씩 넓이 감소
var height = parseInt(currentHeight * 0.97); //2.5%씩 높이 감소
}
image.width = width;
image.height = height;
}
}
</SCRIPT>
그런데, 알려주신 소스를 적용해 보았는데,
버튼을 누르면, 작동이 안되요. 버튼이 얼어버리네요.ㅠㅠ 왜 그럴까요?