Onclick на изображении для перехода на другую страницу с помощью Javascript

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

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

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

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

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

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

Спасибо, РААКС

Ответ 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, не сможет перейти на страницу изображения....

Ответ 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" />

Ответ 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 для каждого изображения на странице (это может быть не то, что вы хотите, вы можете ограничить его, если необходимо), который изменяет текущую страницу на значение атрибута id расширение .html. Это по сути чистая реализация Javascript ответа jQuery @JanPöschko.

Ответ 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>.