Как добавить ссылку с изображения javascript?

Question

Есть код, который меняет изображение на другое при клике по нужной ссылке.

Как в этом коде добавить, что бы при клике на само изображение можно было переходить по определенной ссылке? У каждого изображения своя ссылка для перехода.

<script type="text/javascript">
function l_image (a) {
    document.example_img.src = a;
}
</script>

<table style="width: 100%;">
<tr style="text-align: center; vertical-align: center;">
 <td style="width: 50%;">
  <a href="javascript:l_image('image/img_1.png')">Ссылка на изображение № 1</a><br>
  <a href="javascript:l_image('image/img_2.png')">Ссылка на изображение № 2</a><br>
  <a href="javascript:l_image('image/img_3.png')">Ссылка на изображение № 3</a><br>
  <a href="javascript:l_image('image/img_4.png')">Ссылка на изображение № 4</a><br>
 </td>
 <td style="width: 50%;">
  <img src="image/img_1.png" name="example_img"
  alt="Картинки для демонстрации работы скрипта смены изображений">
 </td>
</tr>
</table>

Answer 1

Как уже Вам подсказал SwaD, необходимо просто поместить тег изображения в ссылку и также менять её атрибут в обработчике события.
Также советую Вам не не смешивать разметку и JavaScript.
Ниже в примере используются data-аттрибуты, т.к. Вы не пояснили где находится информация об используемой ссылке:

let $image = document.getElementById( 'image' ),
    $image_wrapper = document.getElementById( 'image_wrapper' );

document.querySelectorAll( '.image-btn' ).forEach( a => {
  a.addEventListener( 'click', function( e ) {
    // отменяем поведение по-умолчанию (переход по ссылке)
    e.preventDefault();
    $image.src = a.href;
    $image_wrapper.href = a.dataset.link;
  });
});

.image-btn {
  background-color: #008CBA;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 10px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font: 10px monospace;
}

<p>
  <a href="https://picsum.photos/id/1/100/100"
     data-link="https://picsum.photos/id/1/200/300"
     class="image-btn">Изображение 1</a>
  <a href="https://picsum.photos/id/2/100/100"
     data-link="https://picsum.photos/id/2/200/300"
     class="image-btn">Изображение 2</a>
  <a href="https://picsum.photos/id/3/100/100"
     data-link="https://picsum.photos/id/3/200/300"
     class="image-btn">Изображение 3</a>
</p>
<p>
  <a href="https://picsum.photos/id/1/200/300" id="image_wrapper">
    <img src="https://picsum.photos/id/1/100/100"
         name="example_img"
         id="image"
         alt="Изображение для демонстрации работы скрипта" />
  </a>
</p>

БЛОГ НА HUSL

Как добавить ссылку с изображения javascript?

Ответы (1 шт):