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

演習7-1

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>画像を表示する</title>
<script>
"use strict";
window.addEventListener("load", function () {
document.getElementById("IMG_URL").addEventListener("change", function () {
document.getElementById("TARGET_IMG").setAttribute("src", document.getElementById("IMG_URL").value);
});
});
</script>
</head>
<body>
<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;"/>
<div style="text-align:center;">
<img id="TARGET_IMG" src="http://3.bp.blogspot.com/-hEV4B1JbsGQ/T0H8hu_TjFI/AAAAAAAAAfI/2mpa2oR3GUA/s1600/Photo1.JPG" width="320px">
</div>
</body>
</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-1のHTMLファイルを変更せよ．

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>画像を表示する</title>
<script>
"use strict";
window.addEventListener("load", function () {
document.getElementById("RESIZE").addEventListener("change", function () {
document.getElementById("SCALE").textContent = document.getElementById("RESIZE").value + "%";
document.getElementById("TARGET_IMG").width = 320 * document.getElementById("RESIZE").value / 100;
});
document.getElementById("IMG_URL").addEventListener("change", function () {
document.getElementById("TARGET_IMG").setAttribute("src", document.getElementById("IMG_URL").value);
});
});
</script>
</head>
<body>
<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;"/>
<p>倍率： <span id="SCALE">100%</span> <input id="RESIZE" type="range" min="20" max="200" value="100" style="width:300px;"/></p>
<div style="text-align:center;">
<img id="TARGET_IMG" src="http://3.bp.blogspot.com/-hEV4B1JbsGQ/T0H8hu_TjFI/AAAAAAAAAfI/2mpa2oR3GUA/s1600/Photo1.JPG" width="320">
</div>
</body>
</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属性で設定する．

Google Sites

Report abuse