Liens d'images en HTML
Création de liens d'images
Pour créer un lien d'image en HTML, on utilise la balise <a>, qui signifie ancre. La balise <a> définit un hyperlien, et lorsqu'elle est combinée avec la balise <img>, elle permet de transformer une image en un lien cliquable.
La balise <a> possède plusieurs attributs, mais le plus important pour créer des liens d'images est l'attribut href. L'attribut href spécifie l'URL de destination vers laquelle l'utilisateur sera dirigé lorsqu'il cliquera sur le lien d'image. Il suffit d'envelopper la balise <img> à l'intérieur de la balise <a> et de définir l'attribut href avec l'URL souhaitée.
Conseil: Lien d'image basique
<a href="https://www.example.com">
<img src="image.jpg" alt="Cliquez-moi">
</a>Dans cet exemple, la balise <img> est placée à l'intérieur de la balise <a>, et l'attribut href est défini sur "https://www.example.com". Lorsque l'utilisateur clique sur l'image, il sera dirigé vers cette URL.
Attributs des liens d'images
En plus de l'attribut href, il existe quelques autres attributs que vous pouvez utiliser pour personnaliser vos liens d'images :
| Attribut | Description |
|---|---|
target |
Spécifie où ouvrir le document lié. Il peut avoir plusieurs valeurs, mais les plus couramment utilisées sont : - _self : Ouvre le document lié dans le même cadre que celui où il a été cliqué (c'est le comportement par défaut).- _blank : Ouvre le document lié dans une nouvelle fenêtre ou un nouvel onglet. |
title |
Spécifie des informations supplémentaires sur le lien, généralement affichées sous forme d'infobulle lorsque l'utilisateur survole l'image. |
Conseil: Lien d'image avec attributs
<a href="https://www.example.com" target="_blank" title="Visitez Example.com">
<img src="image.jpg" alt="Cliquez-moi">
</a>Dans cet exemple, l'attribut target est défini sur "_blank", donc le document lié s'ouvrira dans une nouvelle fenêtre ou un nouvel onglet lorsque l'utilisateur cliquera sur l'image. L'attribut title est défini sur "Visitez Example.com", ce qui s'affichera sous forme d'infobulle lorsque l'utilisateur survolera l'image.
Styliser les liens d'images
Vous pouvez utiliser CSS pour styliser vos liens d'images et les rendre plus attrayants visuellement ou interactifs. Par exemple, vous pourriez vouloir modifier la bordure, l'opacité ou d'autres propriétés visuelles lorsque l'utilisateur survole le lien d'image.
Conseil: Lien d'image stylisé avec CSS
<style>
a img {
border: 2px solid #ddd;
transition: opacity 0.3s;
}
a:hover img {
border-color: #777;
opacity: 0.8;
}
</style>
<a href="https://www.example.com">
<img src="image.jpg" alt="Cliquez-moi">
</a>Dans cet exemple, les styles CSS sont définis dans la balise <style>. La première règle applique une bordure et un effet de transition à toutes les images à l'intérieur des balises <a>. La deuxième règle change la couleur de la bordure et réduit l'opacité lorsque l'utilisateur survole le lien d'image.
En combinant les attributs HTML et les styles CSS, vous pouvez créer des liens d'images visuellement attrayants et interactifs qui améliorent l'expérience utilisateur sur votre site web. Voici la traduction en français :
Techniques avancées
Il existe des techniques avancées pour créer des liens d'images interactifs et dynamiques, en plus des liens d'images de base qui sont faciles à réaliser. Deux de ces techniques sont la création de cartes d'images avec plusieurs zones cliquables et l'utilisation de JavaScript pour ajouter des fonctionnalités aux liens d'images.
Les cartes d'images vous permettent de définir plusieurs zones cliquables dans une seule image, chacune avec son propre lien ou action. Cela est utile lorsque vous avez une grande image avec différentes sections que vous souhaitez rendre cliquables, comme un menu de navigation ou une vitrine de produits.
Pour créer une carte d'image, vous utilisez la balise <map> avec la balise <area>. La balise <map> définit la carte d'image, tandis que les balises <area> définissent les zones cliquables à l'intérieur de l'image. Chaque balise <area> a des attributs comme shape, coords et href pour spécifier la forme, les coordonnées et la destination du lien de la zone cliquable.
Conseil: Création d'une carte d'image
<img src="image.jpg" alt="Carte d'image" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,0,100,100" href="lien1.html" alt="Lien 1">
<area shape="circle" coords="200,150,50" href="lien2.html" alt="Lien 2">
<area shape="poly" coords="300,50,350,100,300,150" href="lien3.html" alt="Lien 3">
</map>La balise <img> a un attribut usemap qui fait référence à la balise <map> avec le nom "imagemap". La balise <map> contient trois balises <area>, chacune définissant une zone cliquable différente avec une forme spécifique (rectangle, cercle ou polygone), des coordonnées et une destination de lien.
Une autre façon de rendre les liens d'images plus interactifs est d'utiliser JavaScript. Avec JavaScript, vous pouvez ajouter un comportement dynamique à vos liens d'images, comme changer la source de l'image au survol, afficher des informations supplémentaires lors du clic ou déclencher des actions personnalisées.
Conseil: Ajout de JavaScript aux liens d'images
<img id="monImage" src="image.jpg" alt="Cliquez-moi">
<script>
document.getElementById("monImage").addEventListener("click", function() {
alert("Vous avez cliqué sur l'image !");
});
</script>La balise <img> a un attribut id défini sur "monImage". Le code JavaScript utilise la méthode getElementById pour sélectionner l'élément image et lui attache un écouteur d'événement de clic. Lorsque vous cliquez sur l'image, un message d'alerte s'affiche.
En combinant les cartes d'images et JavaScript, vous pouvez créer des liens d'images très interactifs et attrayants qui offrent une expérience utilisateur plus riche. Ces techniques vous permettent de guider les utilisateurs vers différentes sections de votre site web, de donner des informations supplémentaires ou de déclencher des actions spécifiques en fonction de l'interaction de l'utilisateur avec vos images.