Affichage du message de survol de la souris sur certaines parties de l'image jquery / js

J'ai cette image sur les dimensions de la page html / php 500×500 pixels. Maintenant, je veux que ses portions soient tranchées et lorsque l'utilisateur apporte sa souris sur l'image à différentes parties de l'image, un message différent doit être affiché.

Disons que l'image est découpée en 20 parties ou que je reprends les coordonnées de début et de fin pour chaque tranche … Comment puis-je faire du code js pour que, sur la même image, il y ait différents domaines où différents messages (info-bulle) sont affichés.

Chose toute aide ??

J'ai pensé à la programmation en utilisant des méthodes de carte, de zone et de coordonnées … Mais pas de chance de le finir …

Bonjour, c'est ce que vous cherchez:

<html> <head> <script language="JavaScript"> function getDetails(obj){ clickX = window.event.x-obj.offsetLeft; clickY = window.event.y-obj.offsetTop; if((clickX>=100&&clickX<=200)&&(clickY>=100&&clickY<=200)) { alert(" You are between (100,100) And (200,200) of the Image"); } } </script> </head> <body> <img src="image.jpg" onMousemove="getDetails(this)" id="myimg" height="500" width="500" /> </body> </html> 

La version Jquery:

 <head> <script language="JavaScript"> $(document).ready(function(){ $("#myimg").bind("mousemove",function(e){ var offset = $("#myimg").offset(); var clickX=e.clientX - offset.left; var clickY=e.clientY - offset.top; if((clickX>=100&&clickX<=200)&&(clickY>=100&&clickY<=200)) { alert(" You are between (100,100) And (200,200) of the Image"); } }); }); </script> </head> <body> <img src="image.jpg" id="myimg" height="500" width="500" /> </body> 

Ce code obtiendra la coordonnée de la souris par rapport à l'image après avoir survolé l'image et vérifiera si les coordonnées sont de certaines zones sont planées? Et vous donnera le message d'alerte si elles survolent.

J'espère que cela sera utile.

Il existe plusieurs façons:

  1. Utilisez la map et les étiquettes de area voir sa description, elle a été faite pour cette chose

  2. Utilisez svg

Mais je pense que la première solution est la meilleure pour vous