michalvalasek/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Skinner Toggler Test</title>

	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="robots" content="all">

	<link rel="stylesheet" href="">
	<style text="text/css">
	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
	<div id="banner_holder">
		<script type="text/javascript" src="toggler.js"></script>
	</div>

	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</body>
</html>

## toggler.js
var areas = [
	{coords: "0,0,300,125", alt: "Upper", href: "http://info.michalvalasek.com"},
	{coords: "0,125,300,250", alt: "Lower", href: "http://michalvalasek.com"}
];

var $banner = $( document.createElement('img') ).attr({
	src: "http://dummyimage.com/mediumrectangle",
	width: 300,
	height: 250,
	usemap: "#toggler_map"
}).appendTo('#banner_holder');

var $map = $( document.createElement('map')).attr({
	name: "toggler_map"
});
for (var i=0; i<areas.length; i++) {
	var $area = $( document.createElement('area') )
		.attr({alt: areas[i].alt, coords: areas[i].coords, shape: 'rect', href: areas[i].href})
		.on("click", function(){ alert("Clicked: " + $(this).attr('alt')); })
		.appendTo($map);
}
document.write($map[0].outerHTML);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Skinner Toggler Test</title>

	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="robots" content="all">

	<link rel="stylesheet" href="">
	<style text="text/css">
	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	</head>
	<body>
	<div id="banner_holder">
	<script type="text/javascript" src="toggler.js"></script>
	</div>

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</body>
	</html>
	var areas = [
	{coords: "0,0,300,125", alt: "Upper", href: "http://info.michalvalasek.com"},
	{coords: "0,125,300,250", alt: "Lower", href: "http://michalvalasek.com"}
	];

	var $banner = $( document.createElement('img') ).attr({
	src: "http://dummyimage.com/mediumrectangle",
	width: 300,
	height: 250,
	usemap: "#toggler_map"
	}).appendTo('#banner_holder');

	var $map = $( document.createElement('map')).attr({
	name: "toggler_map"
	});
	for (var i=0; i<areas.length; i++) {
	var $area = $( document.createElement('area') )
	.attr({alt: areas[i].alt, coords: areas[i].coords, shape: 'rect', href: areas[i].href})
	.on("click", function(){ alert("Clicked: " + $(this).attr('alt')); })
	.appendTo($map);
	}
	document.write($map[0].outerHTML);