bacon.html

<!--
Shows the areas defined by image maps.
Probably only works with poly & rect shapes at the moment.
Click a shape to see attributes.
I may create a bookmarklet from this if I get motivated enough.
-->
	<script src="http://jscdn.net/jquery.js" type="text/javascript"></script>
	<script src="http://jscdn.net/raphael.js" type="text/javascript"></script>
	<script type="text/javascript">
	jQuery.noConflict();
	jQuery(function($){

		$('img[usemap]').each(function(){

			var map_img = $(this);
			var x = map_img.offset().left;
			var y = map_img.offset().top;
			var w = map_img.width();
			var h = map_img.height();
			var map_id = map_img.attr('usemap');

			var map = Raphael(x, y, w, h);

			$('#'+map_id+' area').each(function(){
				var coords = $(this).attr('coords').split(',');
				var shape = $(this).attr('shape');
				var href = $(this).attr('href');
				var p = map.path({stroke: "#036", fill: "#fff", opacity: 0.5}).moveTo(coords[0], coords[1]);
				for(var i = 2; i < coords.length; i++){
					p.lineTo(coords[i], coords[++i]);
				}
				p.mouseover(function(){
					p.animate({fill: "#c00"}, 500);
				})
				.mouseout(function(){
					p.animate({fill: "#fff"}, 500);
				})
				.click(function(){
					alert(
						'shape: '+shape + "\n"+
						'coords: '+coords.join(',') + "\n"+
						'href: '+href
					);
				});
			});
		});

	});
	</script>