生成AI+スマホで作成「WordPress(ブログ)で使えるJavaScript」 クリックで画像を入れ替える

↓画像をクリック

<img id="myImage" src="imageA.jpg" alt="画像A" style="cursor:pointer; width:600px;">

// 画像要素を取得
const imgElement = document.getElementById('myImage');

// クリックイベントを設定
imgElement.addEventListener('click', () => {
  // 現在のsrcを確認して、条件分岐で入れ替える
  if (imgElement.src.includes('imageA.jpg')) {
    imgElement.src = 'imageB.jpg';
  } else {
    imgElement.src = 'imageA.jpg';
  }
});

/* 対象の画像、またはすべての要素に適用 */
img {
  /* スマホ等でタップした際のハイライト色を透明にする */
  -webkit-tap-highlight-color: transparent;

  /* クリック（フォーカス）時の枠線を消す */
  outline: none;

  /* 画像が長押しで「選択」されて青くなるのを防ぐ */
  user-select: none;
  -webkit-user-select: none; /* Safari/Chrome用 */
}