画像のサイズを複数の％ボタンで拡大や縮小表示
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- HTML表記 --> <div style="float:left;"> <form name="fom1"> <input type="button" value="50%" onClick="scale(0.5)"> <input type="button" value="100%" onClick="scale(1)"> <input type="button" value="150%" onClick="scale(1.5)"> <input type="button" value="200%" onClick="scale(2)"> </form> </div> <img src="画像のURL" id="img1" width="50%" height="auto" style="display: block; margin-left: auto; margin-right: auto;"> |
|
1 2 3 4 5 6 7 8 9 |
// JavaScript 表記 <script type="text/javascript"> <!-- function scale(x){ document.getElementById("img1").style.width = 150 * x; document.getElementById("img1").style.height = 80 * x; } //--> </script> |