JSFiddle - React, Tailwind, and code Playground

Create map poly for rollover

by Jernej Slejko

HTML

Poly: <input type="text" id="cor"/>
<img src="http://www.bartssquare.com/images/graphics/map-imgs/sitemap-base.jpg" id="basemap" usemap="#Map"/>

<map name="Map" id="Map">
  <area shape="poly" coords="219,436,222,356,227,356,230,331,289,332,289,359,300,360,297,440,286,439,286,443,267,441,267,438,260,438,260,441,227,439,226,437" href="http://google.com" target="_blank" alt="hotspot 1" title="Google" />
  <area shape="poly" coords="594,240,597,132,670,137,673,113,764,121,756,191,851,193,852,180,856,179,859,223,801,273,671,266,670,243,594,235" href="http://google.com" target="_blank" alt="hotspot 2" title="Google" />
  <area shape="poly" coords="41,49,42,34,52,33,53,25,124,38,173,72,144,69,142,65,48,53,48,51,42,48" href="http://google.com" target="_blank" alt="hotspot 3" title="Google" />
</map>

JavaScript

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(root.jQuery);
    }
})(this, function($) {
	var has_VML, has_canvas, create_canvas_for, add_shape_to, clear_canvas, shape_from_area,
		canvas_style, hex_to_decimal, css3color, is_image_loaded, options_from_area;

	has_canvas = !!document.createElement('canvas').getContext;

	// VML: more complex
	has_VML = (function() {
		var a = document.createElement('div');
		a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
		var b = a.firstChild;
		b.style.behavior = "url(#default#VML)";
		return b ? typeof b.adj == "object": true;
	})();

	if(!(has_canvas || has_VML)) {
		$.fn.maphilight = function() { return this; };
		return;
	}
	
	if(has_canvas) {
		hex_to_decimal = function(hex) {
			return Math.max(0, Math.min(parseInt(hex, 16), 255));
		};
		css3color = function(color, opacity) {
			return 'rgba('+hex_to_decimal(color.substr(0,2))+','+hex_to_decimal(color.substr(2,2))+','+hex_to_decimal(color.substr(4,2))+','+opacity+')';
		};
		create_canvas_for = function(img) {
			var c = $('<canvas style="width:'+$(img).width()+'px;height:'+$(img).height()+'px;"></canvas>').get(0);
			c.getContext("2d").clearRect(0, 0, $(img).width(), $(img).height());
			return c;
		};
		var draw_shape = function(context, shape, coords, x_shift, y_shift) {
			x_shift = x_shift || 0;
			y_shift = y_shift || 0;
			
			context.beginPath();
			if(shape == 'rect') {
				// x, y, width, height
				context.rect(coords[0] + x_shift, coords[1] + y_shift, coords[2] - coords[0], coords[3] - coords[1]);
			} else if(shape == 'poly') {
				context.moveTo(coords[0] + x_shift, coords[1] + y_shift);
				for(i=2; i < coords.length; i+=2) {
					context.lineTo(coords[i] + x_shift, coords[i+1] + y_shift);
				}
			} else if(shape == 'circ') {
				// x, y, radius, startAngle, endAngle, anticlockwise
				context.arc(coords[0] + x_shift, coords[1] + y_shift, coords[2], 0,...