CODEWITHSUNDEEP
javascriptjqueryajaximagemaps
David Mintz
David Mintz

Reputation: 11

Using jQuery/AJAX with image maps

I'd like to use an image map (specifically, a U.S. state map) to perform an AJAX call with jQuery.

I've been successful performing the call with a select list in a form... because the serialize method will pass name-value pairs from the form. However, I'm not sure how to pass name-value pairs outside a form... i.e. from the image map.

Here's my jQuery code that works with the form:

$('#launch').click(function(event){
         $('#results').show();
         $('#results').load('http://myprogram',
                 $('form').serialize()         
       );
          });

The serialize method passes the state fips code in for the selected state.

What are my options for passing the state fips code from the map when a state is clicked?

Thanks!

Upvotes: 1

Views: 1315

Answers (1)

Jason Kaczmarsky
Jason Kaczmarsky

Reputation: 1686

Assign a data-fips attribute to each state area which holds the state's code. Then create a handler for each state (either by class or element type) and detect an click event.

$('.state').click(funciton(){
    //alert($(this).data('fips'));

    //Pass in the ID to myprogram
    $('#results').load('http://myprogram',$(this).data('fips'));
});

Your state images/links will look something like this:

<a href="#"><img src="state_img.png" data-fips="NY" /></a>

Upvotes: 1

Related Questions