그림1,그림2 모두 동시에 확대와 축소가 적용되게 하려면?

그림1,그림2 모두 동시에 확대와 축소가 적용되게 하려면? 정보

그림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>

복사
공유하기

댓글 전체

ohora 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

12.11.14 12:37:22

이렇게 하면 어떨까요?
아래의 소스로 되면
이미지 갯수 부분은 사용하시고자 하는대로 설정해 주세요.

<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>