勉強部屋‎ > ‎HTML5‎ > ‎

スライダーを使った画像の拡大縮小

演習7-1

ユーザが画像のURLを入力したら,その画像を幅320pxで表示するHTMLファイルを作成せよ.

解答例

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>画像を表示する</title>
  6.     <script>
  7.     "use strict";
  8.     window.addEventListener("load", function () {
  9.         document.getElementById("IMG_URL").addEventListener("change", function () {
  10.             document.getElementById("TARGET_IMG").setAttribute("src", document.getElementById("IMG_URL").value);
  11.         });
  12.     });
  13.     </script>
  14. </head>

  15. <body>
  16.     <p>画像URL<input type="url" id="IMG_URL" value="http://3.bp.blogspot.com/-hEV4B1JbsGQ/T0H8hu_TjFI/AAAAAAAAAfI/2mpa2oR3GUA/s1600/Photo1.JPG" style="width:500px;"/>
  17.     <div style="text-align:center;">
  18.         <img id="TARGET_IMG" src="http://3.bp.blogspot.com/-hEV4B1JbsGQ/T0H8hu_TjFI/AAAAAAAAAfI/2mpa2oR3GUA/s1600/Photo1.JPG" width="320px">
  19.     </div>
  20. </body>
  21. </html>

解説

  • 9行目
    • document.getElementById("IMG_URL").addEventListener("change", ...) で,URL入力欄の値が変化したときのイベントリスナーを登録する.
  • 10行目
    • document.getElementById("TARGET_IMG") で,img要素を取得する.
    • URL入力欄の値(文字列)を,document.getElementById("IMG_URL").value で得る.
    • その値を,setAttribute("src", ...) でimg要素のsrc属性にセットする.
  • 17行目
    • URLの入力欄はタグ<input type="url">を用いる.
  • 19行目
    • 画像の幅を320pxとするために,img要素のwidth属性の値を320pxとする.

演習7-2

スライダーを動かしたら,その動作に合わせて表示している画像を拡大・縮小するように,演習7-1のHTMLファイルを変更せよ.

解答例

ソース

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>画像を表示する</title>
  6.     <script>
  7.     "use strict";
  8.     window.addEventListener("load", function () {
  9.         document.getElementById("RESIZE").addEventListener("change", function () {
  10.             document.getElementById("SCALE").textContent = document.getElementById("RESIZE").value + "%";
  11.             document.getElementById("TARGET_IMG").width = 320 * document.getElementById("RESIZE").value / 100;
  12.         });
  13.         document.getElementById("IMG_URL").addEventListener("change", function () {
  14.             document.getElementById("TARGET_IMG").setAttribute("src", document.getElementById("IMG_URL").value);
  15.         });
  16.     });
  17.     </script>
  18. </head>
  19. <body>
  20.     <p>画像URL<input type="url" id="IMG_URL" value="http://3.bp.blogspot.com/-hEV4B1JbsGQ/T0H8hu_TjFI/AAAAAAAAAfI/2mpa2oR3GUA/s1600/Photo1.JPG" style="width:500px;"/>
  21.     <p>倍率: <span id="SCALE">100%</span> <input id="RESIZE" type="range" min="20" max="200" value="100" style="width:300px;"/></p>
  22.     <div style="text-align:center;">
  23.         <img id="TARGET_IMG" src="http://3.bp.blogspot.com/-hEV4B1JbsGQ/T0H8hu_TjFI/AAAAAAAAAfI/2mpa2oR3GUA/s1600/Photo1.JPG" width="320">
  24.     </div>
  25. </body>
  26. </html>

解説

  • 9行目から12行目
    • document.getElementById("RESIZE").addEventListener("change",…) で,スライダーの値が変化したときのイベントリスナーを追加
    • document.getElementById("RESIZE").valueで,s
    • document.getElementById("SCALE").textContent = … でスライダーの値を表示.
    • document.getElementById("TARGET_IMG").width = … で画像を拡大,縮小
  • 21行目
    • 倍率を表示する部分をspan要素とする(初期値100%)
    • <input type="range" …>でスライダーを表示する.最小値,最大値,初期値をmin, max, value属性で設定する.
 
Comments