Comment superposer les coordonnées X et Y sur une image à l'aide de JavaScript

Les sites web interactifs peuvent offrir une expérience plus attrayante aux utilisateurs. Il existe de nombreuses façons de rendre un site Web plus interactif, par exemple en y ajoutant des animations, des infobulles ou d’autres effets supplémentaires.

Certains sites web affichent également des informations lorsque l’utilisateur survole un élément de la page. Il s’agit notamment de cartes ou d’autres données visuelles qui permettent à l’utilisateur de survoler l’image pour afficher un point de données à l’aide d’une infobulle.

Vous pouvez obtenir cet effet à l’aide de HTML, CSS et JavaScript en utilisant certaines techniques CSS et certains concepts DOM JavaScript.

Les images peuvent être un moyen utile de transmettre des informations d’une manière visuellement attrayante sur une page web. Elles sont également utiles pour ajouter d’autres effets attrayants tels qu’une simple galerie d’images.

Vous pouvez ajouter une infobulle sur une image en HTML à l’aide de CSS et de JavaScript.

Lire Critique de l'Orbit de Campfire Audio : Un son superbe, un style excellent

Le code utilisé dans ce projet est disponible dans ce repo GitHub sous licence MIT.

Dans un nouveau fichier appelé index.html, ajoutez la structure de base d’un fichier HTML :

 <!DOCTYPE html>
<html>
  <head>
    <title>Image Tooltip Example</title>
  </head>
  <body>

  </body>
</html>

À l’intérieur de la balise body, ajoutez une div conteneur. Cette div inclura à la fois l’image et les éléments de l’infobulle :
```
 <div class="container">

</div> 
```
À l’intérieur du conteneur, ajoutez une image. Veillez à ce qu’une image dont le nom de fichier correspond se trouve dans le même dossier que votre fichier HTML :
```
 <img src="image.jpg" class="image" height="420" width="840" alt="Your Image"> 
```
Sous l’image, ajoutez une div pour représenter l’infobulle :
```
 <div class="tooltip"></div> 
```

Dans la balise head, ajoutez une balise style. À l’intérieur de la balise style, ajoutez quelques éléments de style pour le conteneur d’image et l’infobulle :

 <style>
  .container {
    position: relative;
    display: inline-block;
  }
        
  .tooltip {
   position: absolute;
   left: 0;
   display: none;
   padding: 5px;
   background-color: #000;
   color: #fff;
   font-size: 12px;
 }
</style>

Créez une nouvelle balise script au bas de la balise body :

 <body>
  <!-- Your webpage content here -->

  <script>

  </script>
</body>

À l’intérieur de la balise script, utilisez la fonction de sélection DOM, querySelector, pour obtenir les éléments HTML de l’image et de l’infobulle :
```
 const image = document.querySelector('.image');
const tooltip = document.querySelector('.tooltip'); 
```
Ajoutez un écouteur d’événement pour la balise mouseover événement. Cette fonction s’exécute lorsque vous passez la souris sur l’image. L’infobulle s’affiche alors à l’écran :
```
 image.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
}); 
```
Ajout d’un récepteur d’événements pour la fonction mouseout événement. Cette fonction s’exécute lorsque la souris quitte l’image. Dans ce cas, l’infobulle disparaît de l’écran :
```
 image.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
}); 
```
Ouvrez le fichier index.html dans n’importe quel navigateur et survolez l’image pour voir l’infobulle :

Comment calculer et afficher les coordonnées des pixels X et Y de l’image

Maintenant que l’infobulle est visible sur la page, modifiez sa position et son texte pour afficher les coordonnées X et Y de la souris.

Modifiez le style CSS de l’infobulle de manière à ce qu’elle ne soit pas visible avant le survol de l’image. Cela évite de voir l’infobulle en bas de l’image avant de passer à l’endroit où se trouve le curseur :

 .tooltip {
  position: absolute;
  top: -30px;
  left: 0;
  display: none;
  padding: 5px;
  background-color: #000;
  color: #fff;
  font-size: 12px;
}

À l’intérieur de la balise script, ajoutez un autre écouteur d’événement, pour écouter la balise déplacement de la souris événement. Cette fonction s’exécutera en continu chaque fois que votre souris survolera un nouveau pixel. Ajoutez le paramètre event, qui fournira des informations sur l’événement déplacement de la souris dans la fonction. Ces informations comprennent les coordonnées de l’image où se trouve la souris à ce moment-là :
```
 image.addEventListener('mousemove', (e) => {

}); 
```
À l’aide de l’événement, modifiez la position horizontale de l’infobulle en utilisant la propriété CSS left. Chaque fois que la souris se déplace, la valeur est mise à jour pour correspondre aux coordonnées X du curseur, stockées dans le fichier clientX variable :
```
 tooltip.style.left = e.clientX + 'px'; 
```
Modifier la position verticale de l’infobulle en utilisant la propriété CSS top. ClientY représente les coordonnées y de la souris. Les coordonnées offsetHeight La propriété offsetHeight inclut tout rembourrage ou bordure supplémentaire à l’intérieur de l’infobulle. Comme vous ne souhaitez pas que l’infobulle se trouve directement à l’endroit où se trouve le curseur, vous pouvez supprimer 10 px supplémentaires de la position :
```
 tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px'; 
```
Modifiez le contenu du texte de l’infobulle pour afficher les coordonnées :
```
 tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`; 
```
Ouvrez le fichier index.html dans n’importe quel navigateur et survolez l’image pour voir l’info-bulle mise à jour :

Ajouter des effets à votre page web interactive

Vous savez maintenant comment ajouter une infobulle interactive sur une image de votre page web. Vous pouvez continuer à développer vos compétences HTML et CSS en expérimentant d’autres effets HTML intéressants.