In web2py how can the callback argument for executing a function be used within an image map?

Question

Execution of a function when a link is clicked on without redirecting to a new page can be achieved using the callback= instead of _href in the A() helper.

The XML() helper can be used to construct html code with tags that don't have a web2py helper. For example, an image can have two hyperlinks, one is followed by clicking on the top half of an image while the other is followed by clicking on the bottom half. The XML() helper can be used with the A() helper like this:

{{=A(
  IMG(_src=URL('static', path_to_im), _alt='alt text', _height=400, _width=400, _usemap='#'+map_name),
  XML('<map name="%s"><area shape="rect" coords="0,200,400,400" href = "%s"><area shape="rect" coords="0,0,400,200" href = "%s"></map>' % (map_name,enqueue,play))
)}}

. . . but this use of A() does not use _href= at all. So how can callback-like behaviour be achieved for different regions of an image map?

I tried adding data-w2p_method="POST" and an arbitrary id using XML() as is generated in the page source for conventional use of A(... callback=URL()) but this didn't work.

Answer 1

If you're using the usemap attribute and the <map> element to create a client-side image map, then you don't wrap the <img> in an <a> element (that's for server-side image maps) -- so the A() helper (and its "callback" argument) is irrelevant here. Instead, you need to set up your own click handler for the map. Not tested, but maybe something like:

$('map').on('click', 'area', function(e) {
  e.preventDefault();
  var href = $(this).prop('href');
  ajax(href, [], 'mytarget');
});