Haz clic en una imagen para navegar a otra página usando Javascript

Question

Me estoy calentando con Javascript, así que estoy intentando algo por mi cuenta. Estoy buscando una función onclick, donde tengo imágenes en miniatura en mi página index.html, y cada vez que un usuario hace clic en la imagen, se le redirige a una nueva página donde la imagen se muestra de nuevo junto con cierta información al respecto. En este momento lo hago usando solo HTML.

Deseo usar javascript para navegar a la página correspondiente a la imagen en la que el usuario ha hecho clic. ¿Es posible hacerlo usando onclick? Tengo más de 10 imágenes en mi página web y cada vez que un usuario hace clic en una imagen, quiero obtener el ID de esa imagen y redirigirla a la nueva página. La nueva página lleva el nombre del nombre de la imagen. nombre de la imagen ::

Para ex bottle.jpg (que reside en la carpeta de imágenes) redirección nombre página: bottle.html (que reside en la carpeta principal)

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

será apreciado Cualquier información valiosa!

Si se pregunta en algún lugar en este foro, sería útil si alguien puede darme ese enlace.

Gracias, Raaks

Answer 1

tal vez esto es lo que quieres?

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

edición: tener en cuenta que cualquier persona que no tiene habilitado javascript no será capaz de navaigate a la página de imagen ....

Answer 2

Puede definir aa función de clic a continuación, establecer el atributo onclick para el elemento.

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

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

Este enfoque le permite deshacerse de los <a> elemento circundante. Si desea conservarlo, defina el atributo onclick en <a> en lugar de en <img>.

Answer 3

, dado que hace estas cosas tan fácil, usted podría considerar el uso de una biblioteca de JavaScript como jQuery de hacer esto:

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

Básicamente, que concede un evento onClick a todas las imágenes con la clase thumbnail para redirigir a los correspondientes Página HTML (id + .html). Después, sólo tendrá las imágenes en su HTML (sin los elementos a), así:

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

Answer 4

me había instalado su HTML así:

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

A continuación, utilice el siguiente código:

<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> 

que asigna un controlador onclick evento para cada imagen en la página (esto puede no ser lo que usted desea, puede limitar aún más si es necesario) que cambia la página actual con el valor de la i mages id atributo más la extensión .html. Básicamente es la implementación pura de Javascript de la respuesta jQuery de @ JanPöschko.