[xelawho]

<div id="map" style="width: 600px; height: 500px;"></div>
<div id="info"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://newsignature.github.com/us-map/js/libs/raphael.js"></script>
<script src="http://newsignature.github.com/us-map/js/libs/jquery.usmap.js"></script>

<script>
	$(document).ready(function() {
		$('#map').usmap({
			stateSpecificStyles: {
				'AL': {fill: 'yellow'},
				'MS': {fill: 'yellow'},
				'GA': {fill: 'yellow'},
				'FL': {fill: 'yellow'},
				'TN': {fill: 'yellow'},
				'SC': {fill: 'yellow'},
				'NC': {fill: 'yellow'},
				'VA': {fill: 'yellow'}
			},
		mouseoverState: {
				'AL': function(){showInfo('al')},
				'MS': function(){showInfo('ms')},
				'GA': function(){showInfo('ga')},
				'FL': function(){showInfo('fl')},
				'TN': function(){showInfo('tn')},
				'SC': function(){showInfo('sc')},
				'NC': function(){showInfo('nc')},
				'VA': function(){showInfo('va')} 
			}	
		});
		
	var states={
	al:" here's some AL info",
	ms:"some stuff about MS",
	ga:"the deets for GA",
	fl:"FL contacts",
	tn:"TN information",
	sc:"SC data",
	nc:"our man in NC",
	va:"everything you ever wanted to know about VA*"
	}	
	
	function showInfo(state){
		document.getElementById("info").innerHTML=states[state];
		}
	});
</script>