실습문제 9-6
WEB/TRAINNING 2017. 12. 4. 09:20 |6. 이지미 위에 마우스 휠을 위로 굴리면 이미지가 5%씩 축소되고 아래로 굴리면 5%씩 확대되는 웹 페이지를 작성하라.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <head> <title>마우스 휠을 이용한 이미지 확대/축소</title> <script> function wheel(e, img) { if(e.wheelDelta > 0) { img.width -= img.width*0.05; img.height -= img.height*0.05; } else { img.width += img.width*0.05; img.height += img.height*0.05; } } </script> </head> <body> <h3>마우스 휠을 이용한 이미지 확대/축소</h3> <hr> 이미지 위에 휠을 위로 굴리면 이미지가 축소되고 아래로 굴리면 이미지가 확대 됩니다.<br> <img onwheel="wheel(event, this)" src="media/Tulips.png" width="280" height="210" alt="img"> </body> </html> | cs |