https://teratail.com/questions/96585
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<div class="thumbnails">
<img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=1" class="alt_text" alt="1">
<img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=2" class="alt_text" alt="2">
<img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=3" class="alt_text" alt="3">
</div>
<div class="mainImage">
<img src="" alt="">
<p></p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function () {
$('.thumbnails img').hover(function () {
var $thisImg = $(this).attr('src');
var $thisAlt = $(this).attr('alt');
$('.mainImage img').attr({src: $thisImg, alt: $thisAlt});
$('.mainImage p').text($thisAlt);
});
});
</script>
</body>
</html>
いろいろ検索して試してみたけど、くそめんどくさい長いコードだったり、画像だけだったり、画像の切り替えにうざいエフェクトついてたり、楽なコードが全然みつかんない
クリックしたらかわりゃいいんだ。レイアウトなんてcssでどうにかするから、余計なコードはいらねえ
そんな中この回答がすばらしかったです
