Question

I have an image map with two different area shape attributes. I want to great Google Analytic tracking events onClick on the image map depending on the shape attribute clicked.

I’ve tried this:

$('area').val('shape').click(function(e) {
  e.preventDefault();
  if ($(this).val() == 'rect') {
        _gaq.push(['_trackEvent', 'test category', 'test action', 'rect shape clicked']);
  }

  else if ($(this).val() == 'poly') {
        _gaq.push(['_trackEvent', 'test category', 'test action', 'poly shape clicked']);
  }

}); ​

But this doesn’t work. Can an if else statement be used on a click function?

Answer 1

Problem is in your use of val(). shape is an attribute of area tag.

following should work

$('area').click(function(e) {

 var shape=$(this).attr('shape');
  e.preventDefault();
  if (shape == 'rect') {
        _gaq.push(['_trackEvent', 'test category', 'test action', 'rect shape clicked']);
  }

  else if (shape == 'poly') {
        _gaq.push(['_trackEvent', 'test category', 'test action', 'poly shape clicked']);
  }

}); ​