Ajouter un événement Onclick sur la balise d'image HTML en JavaScript
Le onclick est ajouté sur une balise d’image à l’intérieur du HTML. L’événement onclick rendra notre image cliquable. Une fois qu’un utilisateur a cliqué sur l’image, vous pouvez faire ce que vous voulez, comme ouvrir une nouvelle page Web, ajouter des animations, changer une image existante avec une nouvelle, etc. A l’intérieur du onclick, vous pouvez passer une fonction. Ici, vous pouvez soit créer et appeler votre fonction, que vous avez écrite en JavaScript, soit utiliser des fonctions existantes mises à notre disposition par l’objet window comme window.open().
Cet article montrera comment afficher une image dans un nouvel onglet de navigateur lorsqu’un utilisateur clique dessus à l’aide de l’événement onclick. Nous y parviendrons en créant une fonction et en l’appelant à l’intérieur de l’attribut oncreate de la balise HTML image.
Ajout d’un événement onclick sur une balise HTML img à l’aide de JavaScript
Pour obtenir la fonctionnalité d’événement onclick en JavaScript, nous devons d’abord créer une fonction, puis appeler cette fonction à l’intérieur du onclick, qui est présent sur la balise d’image à l’intérieur du HTML. Ici, nous avons pris une image, et lorsqu’un utilisateur clique sur cette image, l’image sera ouverte dans un nouvel onglet du navigateur. Nous allons implémenter cela dans l’exemple ci-dessous.
Ci-dessous, nous avons un document HTML de base, à l’intérieur duquel nous n’avons qu’une balise img avec l’attribut src défini sur une image récupérée depuis le serveur. Sur l’attribut onclick d’une image, on passe la fonction openImg(), qui appellera cette fonction. Nous n’avons pas encore créé cette fonction. A la fin du fichier, nous avons lié notre fichier JavaScript pour créer notre fonction. Voir le code ci-dessous.
<!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 vous exécutez le code ci-dessus, voici à quoi il ressemblera dans le navigateur Web.
Dans notre fichier JavaScript, nous avons défini une fonction openImg(). A l’intérieur de cette fonction, il faut d’abord récupérer la référence à la balise img, qui est présente à l’intérieur du DOM à l’aide de son attribut id image. Cela peut être fait en utilisant la méthode document.getElementById(). Et puis, nous allons stocker la référence de la balise image à l’intérieur de la variable image.
Puisque nous voulons afficher la même image dans un nouvel onglet de navigateur, nous devons également stocker la source de l’image dans une variable que nous pouvons obtenir en utilisant l’attribut src. En JavaScript, il suffit d’utiliser image.src pour accéder à l’attribut source, puis nous le stockerons dans la variable source.
Enfin, pour afficher l’image à l’aide de sa source, on peut utiliser la méthode window.open(). La méthode window.open() est utilisée pour ouvrir un nouvel onglet, et tout ce que nous passons à l’intérieur de cette fonction sera affiché à l’intérieur du nouvel onglet. Ici, nous passerons la variable source, qui contient le lien de l’image elle-même. Voici à quoi ressemble notre fonction JavaScript openImg().
function openImg() {
var image = document.getElementById('image');
var source = image.src;
window.open(source);
}
Si vous exécutez le code ci-dessus dans le navigateur Web et cliquez sur l’image, l’image s’ouvrira dans un nouvel onglet du navigateur, comme indiqué ci-dessous.
L’attribut d’image HTML onclick permet de rendre une image cliquable en JavaScript. Cela peut être utilisé dans diverses situations et selon le type de fonctionnalité que vous souhaitez implémenter pour votre site 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.
LinkedInArticle connexe - JavaScript Image
- Recadrer une image en JavaScript à l'aide de HTML Canvas
- Fondu d'image à l'aide de JavaScript
- Changer l'image au survol en JavaScript
- Charger l'image à partir de l'URL en JavaScript
- Faire pivoter une image avec JavaScript