はじめに
Webページにおける画像は、視覚的な情報は重要な役割を果たします。JavaScriptを使えば、画像の表示だけでなく、動的な切り替えやユーザーから選ばれた画像の表示など、簡単に実装できます。今回は、これらの画像の取り扱いについてLogとして記載していきたいと思います。
画像を表示・切り替える
ボタン操作
画像はHTMLの <img> タグで表示します。JavaScriptを使うことで、動的に src 属性を変更して画像を差し替えることができます。
html
<img id="Image" src="image/image.jpg" alt="サンプル画像" width="300">
<button onclick="changeImage()">画像を変更</button>
JavaScript
function changeImage() {
const img = document.getElementById("Image");
img.src = "image/image2.jpg";
}
マウスイベントで画像を切り替える
画像にカーソルを乗せたときに変化させたり、外れたら元に戻すといった操作が可能です。mouseover: マウスカーソルが画像に乗ったときに実行するイベントmouseout: マウスカーソルが画像から離れたときに実行するイベント
html
<img id="hoverImage" src="image/image.jpg" alt="ホバー画像" width="300">
JavaScript
let hoverImg = document.getElementById("hoverImage");
hoverImg.addEventListener("mouseover", () => {
hoverImg.src = "image/image.jpg";
});
hoverImg.addEventListener("mouseout", () => {
hoverImg.src = "image/image2.jpg";
});
スライドショー
複数の画像を順番に表示するスライドショーもJavaScriptで簡単に作れます。
html
<img id="slide" src="image/image.jpg" width="300">
<button onclick="nextSlide()">次へ</button>
JavaScript
let images = ["image/image.jpg", "image/image2.jpg", "image/image3.jpg"];
let index = 0;
function nextSlide() {
index = (index + 1) % images.length;
document.getElementById("slide").src = images[index];
}
画像の読み込み状態を確認
画像の読み込み成功・失敗を検知したいときは、onload と onerror イベントを使用します。
html
<img id="checkImage" src="image.jpg" width="300">
JavaScript
let checkImage = document.getElementById("checkImage");
checkImage.onload = () => {
console.log("画像が正常に読み込まれました");
};
checkImage.onerror = () => {
console.log("画像の読み込みに失敗しました");
};
File APIを使って画像をプレビュー表示
ユーザーがファイル選択した画像を即座に表示（プレビュー）する方法も存在します。
html
<input type="file" id="fileInput" accept="image/*">
<img id="preview" width="300">
JavaScript
document.getElementById("fileInput").addEventListener("change", function (e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function (e) {
document.getElementById("preview").src = e.target.result;
};
reader.readAsDataURL(file);
});
まとめ
| 操作 | 使用方法 |
| 表示・切り替え | <img> + src変更 |
| マウスイベントでの切り替え | mouseover, mouseout |
| スライドショー | 配列 + クリックイベント |
| 読み込みチェック | onload, onerror |
| プレビュー表示 | FileReader |
最後に
JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript
以上、ログになります。
これからも継続していきましょう！！
コメント