JSFiddle - React, Tailwind, and code Playground

by Joshua

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<div class="pim">
	<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
</div>
<map name="planetmap">
	<area shape="rect" coords="0,0,82,126" alt="Sun" href="#sun.htm">
	<area shape="circle" coords="90,58,3" alt="Mercury" href="#mercur.htm">
	<area shape="circle" coords="124,58,8" alt="Venus" href="#venus.htm">
</map>

CSS

div.pim {
	position:relative;
	outline:none !important;
	display: inline-block;
}
div.pim .pim-paper-wrap {
	position: absolute; left:0; top:0;
}

JavaScript

// loop image maps
$('.pim').each(function(){
	// get related image
	var $img = $(this).find('>img'),
		$map = $('map[name="'+$img.attr('usemap').replace('#', '')+'"]'),
		$width = $img.width(),
		$height = $img.height();
	// create pim link backdrop
	var $paper_wrap = $('<div class="pim-paper-wrap"></div>');
	$(this).append($paper_wrap);
	// create drawing board
	var paper = Raphael($paper_wrap.get(0), $width, $height)
	// loop areas and place paper objects
	$map.find('area').each(function(){
		var coords = this.coords.split(',');
		for(var x in coords)
			coords[x] = parseInt(coords[x]);
		// draw circles
		if(this.shape=='circle'){
			var ob = paper.circle(coords[0], coords[1], coords[2]);
		}
		// draw rect
		else if(this.shape=='rect'){
			var ob = paper.rect(coords[0], coords[1], (coords[2]-coords[0]), (coords[3]-coords[1]));
		}
		// draw polygon
		else if(this.shape=='polygon'){
			var path_str = '';
			for(var x=0; x<coords.length; x+=2){
				var letter = x ? ' L' : 'M';
				path_str += (letter + ' ' + coords[x] + ' ' + coords[x+1]);
			}
			path_str += ' Z';
			var ob = paper.path(path_str);
		} else return;
		ob
			.attr({
				"stroke": 'rgba(0,0,0,0)',
				"fill":"rgba(0,0,0,0)",
				"stroke-width": '1',
				"stroke-dasharray": ['.']
			})
			.attr('href', this.href)
			.mouseover(function(){
				// anything
				ob.attr('stroke', 'rgba(255,255,255,1)');
			})
			.mouseout(function(){
				// anything
				ob.attr('stroke', 'rgba(0,0,0,0)');
			});
	});
});