※ ChatGPTを利用し、要約された質問です（原文：javascript 画像をクリックで切り替える）
JavaScriptで画像をクリックで切り替える方法
このQ&Aのポイント
JavaScriptを使用して、画像をクリックすることで切り替える方法について質問です。
現在の記述では、hoverイベントを使用してマウスオーバー時に画像が切り替わるシステムですが、クリック時にも同様の動作をさせたいです。
クリックに変更したところ、動作しなくなってしまいました。対処方法を教えてください。
javascriptについて質問させていただきます。
<script type="text/javascript" defer>
$(function(){
$('.thmbnail').hover(
function(){
$("#product_large_image").attr('src', $(this).attr('src'));
},
function(){
$("#product_large_image").attr('src', $("#product_large_image").attr('data-image-source'));
}
);
});
</script>
こちらが現在の記述です。
画像のパスを指定できないため、.thmbnailと#product_large_imageで指定しているようです。
＃product_large_imageは
<img id="product_large_image" class="large" src="@(imageUrl)?@ViewBag.RCC" data-image-source="@imageUrl" alt="" />
.thmbnailは
<img class="thmbnail" src="@(imgPath)?@ViewBag.RCC" alt="" />
となっており、画像のパスが変動するシステムです。
現在の記述はhoverによってマウスオーバーで画像が切り替わるシステムなのですが、
これをクリックで切り替わるようにしたく、
hoverをclickに変えたところ、
動かなくなってしまいます。
対処法を教えていただければと存じます。
よろしくお願い致します。
