onclick на изображении, чтобы перейти на другую страницу, используя 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> 

редактировать: имейте в виду, что любой, кто не включен Javascript не сможет navaigate на страницу изображения ....

Answer 2

Вы можете определить аа функцию щелчка, а затем установить атрибут 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>.

Answer 3

Потому что это делает эти вещи так легко, вы могли бы рассмотреть вопрос об использовании библиотеки 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 4

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