JSFiddle - React, Tailwind, and code Playground

by Benahmed Taoufiq

HTML

<div class="djazmap">
		<img  width=485  height= 465 usemap="#djazmap" />
		<map name="djazmap">
    <area shape="poly" name="area1" coords="105,310,108,315,108,318,109,319,112,319,116,316,128,329,138,342,149,342,151,344,151,346,158,352,177,369,181,369,183,368,186,368,189,376,210" />Area
</map>
 
</div>

CSS

.djazmap 
{
	width:485px;
	height:465px;
	background:url(http://nsa38.casimages.com/img/2016/05/16/160516022109136768.png) left top no-repeat ;
	position:relative;
}
 
.djazmap .overlay 
{
	width:485px;
	height:465px;
 background:url(http://nsa38.casimages.com/img/2016/05/16/160516022109136768.png) 485px top  no-repeat ;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
 
}
 
.djazmap img
{
	position : absolute;
	top:0;
	left:0;
	z-index:2;
}

JavaScript

$(function(){
	$('.djazmap').append('<div class="overlay">');
	$('.djazmap').mouseenter(function(){
		var index = $(this).find("area[name=area1]").index();
    //console.log(index);
		var left= -index * 485 - 485;
		$('.djazmap .overlay').css({
			backgroundPosition: left+"px 0px"
			});
		}).mouseout(function(){
		$('.djazmap .overlay').css({
			backgroundPosition : "173px 0px"
			});
		});
	});