Перенаправить на другую страницу, нажав на изображение

Question

В настоящее время я занимаюсь разработкой сайта WordPress. Мне нужно связать страницу с помощью изображения (событие onclick => перенаправить на другую страницу. Однако оно уже связано с использованием текста поверх изображения.

<div class="img-one">
    <img class="alignnone size-full wp-image-1303" src="image-source" alt="" width="850" height="1250" />
    <div class="adventure-link">
        <a href="page-link">Topic</a>
    </div>
</div>

Поскольку мне нужно сохранить текстовую ссылку>Пожалуйста, помогите мне связать изображение с целевой страницей. (Текстовое поле использовалось для вставки изображения и ссылки.

Answer 1

Я думаю, вы можете просто использовать тег в качестве родителя тега img и поставить атрибут target = blank для

<div class="img-one">
  <a href="link" target="blank">
    <img class="alignnone size-full wp-image-1303" src="image-source" alt="" width="850" height="1250" />
  </a>

, тогда для него не требуется функция щелчка

Answer 2

Вы можете попробовать это.

<img src="//Image Path" onclick="location.href = '//Page you want to go';" style="cursor: pointer;">

Answer 3

Вы можете просто добавить событие onclick к изображению:

 document.getElementById("redirectimg").onclick = function () {
             window.location.href = "https://stackoverflow.com";
        };

<div class="img-one">
    
    <img id="redirectimg" class="alignnone size-full wp-image-1303" src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" alt="" width="850" height="1250" />
    <div class="adventure-link"><a href="page-link">Topic</a></div>
    </div>
    
 

Но вы должны добавить идентификатор в тег img.

ИЛИ вы можете попробовать вот так:

  <div class="img-one">
    
    <img id="redirectimg" class="alignnone size-full wp-image-1303" src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" alt="" width="850" height="1250" onClick="window.location='https://stackoverflow.com/';"  />
    <div class="adventure-link"><a href="page-link">Topic</a></div>
    </div>

Answer 4

Вы можете добавить атрибут onclick к изображению следующим образом:

<img onclick="window.location.href='http://example.com'" class="alignnone size-full wp-image-1303" src="image-source" alt="" width="850" height="1250" />

Или просто обернуть изображение в другой href:

<a href="http://example.com"><img class="alignnone size-full wp-image-1303" src="image-source" alt="" width="850" height="1250" /></a>