Je pense que vous devriez utiliser un plugin jquery imagemap ... c'est mon préféré
Lien :http://archive.plugins.jquery.com/project/maphilight
Démo :http://davidlynch.org/projects/maphilight/docs/demo_usa.html
Ce sujet a également été abordé en détail ici .....
Utilisation du survol JQuery avec une carte d'image HTML
Je ne pense pas qu'il y ait besoin de duplication
=============Mise à jour sur vos commentaires ===================
Allez sur https://github.com/kemayo/maphilight/blob /master/jquery.maphilight.js
Pouvez-vous voir ce qui suit que maphilight accepte fillColor :'000000' ;
Vous devez changer fillOpacity à 1.0 pour supprimer l'opacité
Tout ce que vous avez à faire est de travailler sans souris en éditant le code ci-dessous et en le remplaçant par le vôtre
$(map).trigger('alwaysOn.maphilight').find('area[coords]')
.bind('mouseover.maphilight', mouseover)
.bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });;
Vous avez une version fonctionnelle de la couleur d'arrière-plan ...
Merci :)