JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<img src="http://placehold.it/200x200" usemap="bI" />
<map class="bI" name="bI">
    <area title="Ukraine" shape="rect" coords="0,0,100,100" />
    <area title="Kyiv" shape="rect" coords="100,0,200,100" />
    <area title="Odessa" shape="rect" coords="0,100,100,200" />
</map>

CSS

area {
    outline: 1px solid red;
}

JavaScript

var controlC = {
	selector: '.bI',
    txt: null
};
controlC.init = function() {
	var ctx = controlC;
	var mapDom = $(ctx.selector);
	ctx.txt = $('<input />');
	ctx.txt.css('opacity', '0');
	mapDom.eq(0).after(ctx.txt);


	mapDom.each(function() {
		$(this).find('area').click(function() {
			ctx.txt.val($(this).attr('title'));
			var copyTextarea = ctx.txt.get(0);
			copyTextarea.select();

			try {
				var successful = document.execCommand('copy');
				var msg = successful ? 'Успешно сопировано: '+copyTextarea.value  : 'Не удалось скопировать';
				alert(msg);
			} catch (err) {
				alert('К сожалению, ваш браузер не поддерживает копирование :(');
			}
		});
	});
};

$(document).ready(function() {
	controlC.init();
});