Agregar evento Onclick en etiqueta de imagen HTML en JavaScript
El onclick se agrega sobre una etiqueta de imagen dentro de HTML. El evento onclick hará que se pueda hacer clic en nuestra imagen. Después de que un usuario hace clic en la imagen, puede hacer lo que quiera, como abrir una nueva página web, agregar animaciones, cambiar una imagen existente por una nueva, etc. Dentro de onclick, puede pasar una función. Aquí, puede crear y llamar a su función, que ha escrito en JavaScript o utilizar funciones existentes disponibles para nosotros por el objeto ventana como window.open().
Este artículo mostrará cómo mostrar una imagen en una nueva pestaña del navegador cuando un usuario hace clic en ella mediante el evento onclick. Lo lograremos creando una función y llamándola dentro del atributo oncreate de la etiqueta de imagen HTML.
Agregar un evento onclick en una etiqueta HTML img usando JavaScript
Para lograr la funcionalidad del evento onclick en JavaScript, primero tenemos que crear una función y luego llamar a esa función dentro del onclick, que está presente en la etiqueta de la imagen dentro del HTML. Aquí, hemos tomado una imagen, y cuando un usuario hace clic en esta imagen, la imagen se abrirá en una nueva pestaña del navegador. Implementaremos esto en el siguiente ejemplo.
A continuación tenemos un documento HTML básico, dentro del cual solo tenemos una etiqueta img con el atributo src establecido en una imagen obtenida del servidor. En el atributo onclick de una imagen, pasamos la función openImg(), que llamará a esa función. Aún no hemos creado esta función. Al final del archivo, hemos vinculado nuestro archivo JavaScript para crear nuestra función. Vea el código a continuación.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Image taken from Unsplash -->
<img id="image" src="https://bit.ly/3jFwe3d" onclick="openImg()">
<script src="./script.js"></script>
</body>
</html>
Si ejecuta el código anterior, así se verá en el navegador web.
Dentro de nuestro archivo JavaScript, hemos definido una función openImg(). Dentro de esta función, primero tenemos que obtener la referencia a la etiqueta img, que está presente dentro del DOM usando su atributo id image. Esto se puede hacer usando el método document.getElementById(). Y luego, almacenaremos la referencia de la etiqueta de imagen dentro de la variable image.
Como queremos mostrar la misma imagen dentro de una nueva pestaña del navegador, también tenemos que almacenar la fuente de la imagen en una variable que podemos obtener usando el atributo src. En JavaScript, solo tenemos que usar image.src para acceder al atributo fuente, y luego lo almacenaremos dentro de la variable source.
Finalmente, para mostrar la imagen usando su fuente, podemos usar el método window.open(). El método window.open() se usa para abrir una nueva pestaña, y todo lo que pasemos dentro de esta función se mostrará dentro de la nueva pestaña. Aquí, pasaremos la variable de origen, que contiene el enlace de la imagen en sí. Así es como se ve nuestra función JavaScript openImg().
function openImg() {
var image = document.getElementById('image');
var source = image.src;
window.open(source);
}
Si ejecuta el código anterior dentro del navegador web y hace clic en la imagen, la imagen se abrirá en una nueva pestaña del navegador, como se muestra a continuación.
El atributo de imagen HTML onclick ayuda a hacer clic en una imagen en JavaScript. Esto se puede usar en varias situaciones y dependiendo del tipo de funcionalidad que le gustaría implementar para su sitio web.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedInArtículo relacionado - JavaScript Image
- Recortar una imagen en JavaScript usando HTML Canvas
- Imagen de fundido de entrada usando JavaScript
- Cambiar imagen al pasar el mouse en JavaScript
- Cargar imagen desde URL en JavaScript
- Rotar una imagen con JavaScript