нажмите на изображение, чтобы перейти на другую страницу, используя Javascript

Question

Я разогреваюсь с помощью Javascript, поэтому я пытаюсь что-то самостоятельно.Я ищу функцию onclick, где у меня есть уменьшенные изображения на моей странице index.html, и всякий раз, когда пользователь щелкает изображение, он перенаправляется на новую страницу, где изображение снова отображается вместе с некоторой информацией о нем.Сейчас я делаю это, используя простой HTML.

Я хочу использовать javascript для перехода на страницу, соответствующую изображению, по которому щелкнул пользователь.Это возможно сделать с помощью onclick?У меня есть более 10 изображений на моей веб-странице, и каждый раз, когда пользователь нажимает на изображение, я хочу получить идентификатор этого изображения и перенаправить его на новую страницу.Новая страница названа в честь имени изображения.

Например: имя изображения: bottle.jpg (находится в папке с изображениями) имя страницы перенаправления: bottle.html (находится в главной папке)

<a href="bottle.html" id="bottle" ><img src="../images/bottle.jpg" alt="bottle" class="thumbnails" /></a>

Любая ценная информация будет оценена по достоинству!

Если об этом кто-то спросит на этом форуме, было бы полезно, если бы кто-нибудь дал мне эту ссылку.

Спасибо, Раакс

Answer 1

Может быть, это то, что ты хочешь?

<a href="#" id="bottle" onclick="document.location=this.id+'.html';return false;" >
    <img src="../images/bottle.jpg" alt="bottle" class="thumbnails" />
</a>

edit: имейте в виду, что любой, у кого не включен javascript, не сможет перейти на страницу изображения ....

Answer 2

Поскольку все это очень просто, вы можете использовать библиотеку JavaScript, например jQuery , чтобы сделать это:

<script>
    $(document).ready(function() {
        $('img.thumbnail').click(function() {
            window.location.href = this.id + '.html';
        });
    });
</script>

По сути, он присоединяет событие onClick ко всемизображения с классом thumbnail для перенаправления на соответствующую страницу HTML (id + .html).Тогда вам нужны только изображения в вашем HTML (без элементов a), например:

<img src="bottle.jpg" alt="bottle" class="thumbnail" id="bottle" />
<img src="glass.jpg" alt="glass" class="thumbnail" id="glass" />

Answer 3

Я бы настроил ваш HTML следующим образом:

<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />

Затем используйте следующий код:

<script>
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
    var image = images[i];
    image.onclick = function(event) {
         window.location.href = this.id + '.html';
    };
}
</script>

, который назначает обработчик событий onclick каждому изображению настраница (это может быть не то, что вы хотите, вы можете ограничить ее, если необходимо), которая изменяет текущую страницу на значение атрибута images id плюс расширение .html.По сути, это чистая реализация Javascript ответа @ JanPöschko's jQuery.

Answer 4

Вы можете определить функцию щелчка, а затем установить атрибут onclick для элемента.

function imageClick(url) {
    window.location = url;
}

<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onclick="imageClick('../images/bottle.html')" />

Этот подход позволяет избавиться от окружающего элемента <a>. Если вы хотите сохранить его, определите атрибут onclick для <a> вместо <img>.