Raphael Responsive Map

Create a repsonsive svg map with links using raphael.js

HTML

<script src="https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<div id="map"></div>

<!-- 

1. How can I create links for every single outline?
2. How can I add an information to my mouseover, e.g. "North West"?

-->

CSS

html, body {
    margin: 0;
    padding: 0;
}
#map {
    width: 100%;
    height: 100%;
   background: white;
}

JavaScript

var div_map= $('#map')
var set_first = div_map.width();
div_map.height(set_first);
// Init responsive map
// ok, lets call the Raphaël paper map for 'the simple map'
	var map = Raphael("map", daWidth, daHeight);
	map.setViewBox(0, 0, 540, 540, true); // original map was designed at 959x593
	map.canvas.setAttribute('preserveAspectRatio', 'none'); // there's no method in Raphaël for doing this directly
	
	
	var daWidth = div_map.width();
	var daHeight = div_map.width();
	// listen for window resizing, reset sizes for all elements
	$(window).resize(function(){
     	daWidth = Math.round((div_map.width()));
     	daHeight = Math.round((div_map.width()));
		
		// setsize is a very handy method that, i believe, is new to Raphaël 2.0
		// it's great for being responsive in our designs.
		map.setSize(daWidth,daHeight);
		div_map.height(daWidth);
	});

var style = {
  fill: "#fff",
  stroke: "transparent",
  "stroke-width": 1,
  "stroke-linejoin": "round",
  cursor: "pointer"
};

var regions = {};
regions["yw-arnsberg"] = {href:"www.google.com", title: "mytitle", path: map.path("M...