Question

I have a US HTML image map with the states highlighted with coordinates. Each state when clicked will bring up a modal window with facilities locations.

Right now I have it where each state has an ID, the user clicks on the hotspot and then it loads the facilities locations with external HTML via jQuery .load() to lighten the document load.

Here’s an example in the JS

$('#Alabama').load('locations/Alabama.html');

and then the container that will load Alabama html in the main document is

<div class="overlay" id="Alabama"></div> 

As you can see I have to enter these in for each state. Obviously this is tedious and probably not the best method. DRY comes to mind but I’m not good at writing Javascript from the ground up.

What would be the best way to access the state IDs without writing each state instance? I’m thinking a JSON object with a click function that constructs the markup and calls the modal window. I’m just not sure where to begin.

Answer 1

If it’s a modal window, then you could probably just use the same overlay each time a state is clicked. So basically just do this…

$(".overlay").load("locations/alabama.html");

A full example might look something more like this though…

$("area").click(function(){
   var url = $(this).attr("href");
   $(".overlay").load(url);
});

You may have to do something to prevent the browser default behavior of navigating on the clicked area. You could remove the href values and put them somewhere else…

$("area").each(function(i, area){
   $(area).data("old-href", $(area).attr("href");
   $(area).attr("href","#");
});
//Then you do the same as above, but you get your url from the data method.
$("area").click(function(){
   var url = $(this).data("old-href");
   $(".overlay").load(url);
});