이미지를 5% 씩 줄이고 늘리는 방법을 모르겠습니다
<!DOCTYPE html>
<html>
<head>
<title>onwheel</title>
<script>
function wheel(e,obj){
if(e.wheelDelta<0){
}
else{
}
img.style.width=
img.style.height=
}
</script>
</head>
<body>
<h3>마우스 휠을 이용한 이미지 확대/축소</h3>
<hr>
<p>이미지 위에 휠을 위로 굴리면 이미지가 축소되고 아래로 굴리면 이미지가 확대됩니다.</p>
<img onmousewheel="wheel(event,this)" src="media/Tulips.png" width="130px" height="100px">
</body>
</html>
왜냐하면 <img> 태그에 출력되는 이미지는 배치(layout)로 보지 않고 콘텐츠(content)로 보기 때문입니다.
그래서 브라우저 들은 style 태그를 이용하여 이미지 크기를 조절하는 것을 허용하지 않습니다.
어렵죠.
다만 이미지는 예외적으로 <img> 태그의 속성인 width와 height으로 바로 크기를 제어한다고 알면 됩니다.
그래서 다음과 같이 하면 됩니다.
if(e.wheelDelta > 0) { // 휠을 위쪽으로 굴린 경우, 5% 씩 축소
img.width -= img.width*0.05;
img.height -= img.height*0.05;
}
else { // 5% 씩 확대
img.width += img.width*0.05;
img.height += img.height*0.05;
}