JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://www.how-to-draw-cartoons-online.com/image-files/draw.gif" alt="" usemap="#map" />
<map name="map">
	<area shape="rect" coords="133,207,237,113" href="#carre" alt="" />
	<area shape="circle" coords="63,164,50" href="#cercle" alt="" />
</map>
<div id="carre" class="target">
	<p>Le carré est un cercle qui a mal tourné.</p>
</div>
<div id="cercle" class="target">
	<p>Prenez un cercle, caressez-le, il deviendra vicieux !</p>
</div>

CSS

div {position:absolute;left:30px;padding:0 20px;text-align:center;font:20px/60px sans-serif;background:#eee;opacity:0;transition:all .3s ease;}
#carre {background:#FFF200;}
#cercle {background:#00FF00;}
div.show, #carre:target, #cercle:target {left:0;opacity:1;}
p {margin:0;}

JavaScript

function zoneClick(e){
	e.preventDefault();
	
	for(var i=0, l=target.length; i<l; i++){
		target[i].className = target[i].className.replace(" show", "");
	}
	
	document.getElementById(e.target.hash.substring(1)).className += " show";
}

var zone = document.querySelectorAll("area"),
	target = document.querySelectorAll(".target"),
	i = 0,
	l = zone.length;

for ( ; i<l; i++) zone[i].addEventListener("click", zoneClick, false);