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

演習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で，ｓ
    • document.getElementById("SCALE").textContent = … でスライダーの値を表示．
    • document.getElementById("TARGET_IMG").width = … で画像を拡大，縮小
  • 21行目
    • 倍率を表示する部分をspan要素とする（初期値100%）
    • <input type="range" …>でスライダーを表示する．最小値，最大値，初期値をmin, max, value属性で設定する．