(Sample)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>オンラインショールーム</title>
<style>
button {
background-color: white;
border: none;
color: black;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
}
button:hover {
color: red;
outline: none;
}
img {
max-width: 30%;
height: auto;
display: block;
margin: 0 auto;
}
.button-container {
display: flex;
justify-content: space-around;
margin-top: 20px;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<a href="#" id="closeWindow">このウィンドウを閉じる</a>
<h1>オンラインショールーム</h1>
<img name="car" src="img/front.jpg" alt="Car View">
<div class="button-container">
<button type="button" onmouseenter="msg(0)" onmouseleave="msg(0)">フロント</button>
<button type="button" onmouseenter="msg(1)" onmouseleave="msg(0)">サイド</button>
<button type="button" onmouseenter="msg(2)" onmouseleave="msg(0)">リア</button>
</div>
<script type="text/javascript">
let icon = [];
for (let n = 0; n < 3; n++) {
icon[n] = new Image();
}
icon[0].src = "img/front.jpg";
icon[1].src = "img/side.jpg";
icon[2].src = "img/rear.jpg";
function msg(onoff) {
document.querySelector('img[name="car"]').src = icon[onoff].src;
}
</script>
<script src="script.js"></script>
</body>
</html>このコードのポイントは以下の通りです。
JavaScriptのポイント
- let icon = []; 配列を初期化。
- forループを使用して3つの画像オブジェクトを作成。
- 各画像オブジェクトに対応する画像のソースを設定。
- function msg(onoff): 画像を変更する関数。document.querySelector('img[name="car"]').src = icon[onoff].src;で画像のsrcを変更します。
その他のポイント
<div class="button-container">: ボタンコンテナ内に「フロント」「サイド」「リア」の3つのボタンがあります。各ボタンはmouseenterおよびmouseleaveイベントで画像を変更します。
以上。