Basic jQuery question

[sakina]

Hello,

I am developing landing pages for several clients, and I will need to use a map to show where my clients have offices (most have offices in different states, some have several offices in particular states). I want the states to start off highlighted in a certain color, and when the user scrolls over the state, I'd like for a box (which I can format using HTML/CSS) to display underneath the map. This box will include the address/contact number of each office in the selected state. Can someone please help me learn how to add the HTML box?

Here is my code so far:

<div id="map" style="width: 600px; height: 500px;"></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'}
			}
		});
	});
</script>

Thanks in advance!

[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>

[sakina]

For some reason, that made the map completely disappear. What could have caused this?

Can I put div's around the text to style the content boxes?

[sakina]

I was able to make the map display. Thank you for your help!

How can I go about styling the text?

[sakina]

styling is simpler than i thought it would be

Thank you for all your help!

[sakina]

How would I make a state remain active (stay the new color, even if I scroll over other states) after clicking it?

[xelawho]

<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')} 
			},
			
		click: function(event, data) {
		if(this.stateSpecificStyles[data.name]){
			this.stateSpecificStyles[data.name].fill= 'red';
				}
			}			
		});
		
	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>