clickmap.js

$(document).ready(function() {
		
			// create canvas
			var canvas = document.createElement("canvas");
			canvas.height = 300; // important! because default canvas size is 300x150
			var ctx = canvas.getContext('2d');
			
			// create img
			var img = document.createElement("img");
			// IMPORTANT adding shadow map - each area has different background color
			// which is then used to identify the area (see the image to understand)
			img.src = "/canvasmap/canvasmap_shadowmap.png";
			// wait till it's loaded and redraw it into canvas (still neither canvas nor img are displayed)
			img.onload = function(e) {
				ctx.drawImage(img, 0, 0);
				getMyImgData(ctx);
			} // end img.onload
			
		}); // end domready
		
		function getMyImgData(ctx) {
		  
			// get pixel data from the canvas
			var pix = ctx.getImageData(0, 0, 300, 300);
                                       
			$("#map_wrapper").mousemove(function(e){
				// each pixel is represented by 4 subsequent values in the data array, being red, green, blue, alpha
				// datapos is the respective value for a pixel on [offsetX,offsetY] coordinates
				var datapos = ((e.offsetY-2) * 300 * 4) + ((e.offsetX-1) * 4);                 
				// will pick one of them, let's say the first one which is red channel, and read the color value there
				var red = pix.data[datapos];
				
				// others commented out. just for info purposes here
				//var green = pix.data[datapos+1];
				//var blue = pix.data[datapos+2];
				//var alpha = pix.data[datapos+3];

				// associative array of districts and e.g. their URLs
				// IMPORTANT the 'key' in this array is actually the color value on the shadow map - this is the main idea of the example
				var countries = {
				  // decimal color value: [sprite position, "country name"]
					00: [5, "Poland"],
					51: [6, "Germany"],
					102: [1, "Czechia"],
					153: [2, "Slovakia"],
					187: [4, "Austria"],
					221: [3, "Hungary"],
					255: [0, "Nothing"]
				}
        
				// shift css background sprite
				$("#map_wrapper").css("background-position", (countries[red][0])*(-300)+"px 0px").css("cursor","pointer");
				// show me the country name
				$("#url").text(countries[red][1]);
				
			});
		}
		

And how to import it in my html code?