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

그림1,그림2 모두 동시에 확대와 축소가 적용되게 하려면? > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

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