JQuery with HTML imagemap

Question

I can do something like this:

$(document).ready(function(){
    $(".schedule_link").colorbox({width:"95%", innerHeight:344, iframe:true});
});

to attach the colorbox to a link ...

<a class='schedule_link' href="index.html">Schedules</a>

... but what is the syntax to attach it to an imagemap like this?

<map name="mymap">
   <area shape="rect" coords="496,500,729,523" href="??call JQuery??">
</map>

Answer 1

You can give your <area> tags a class just like the link:

<area class="something" shape="rect" coords="496,500,729,523" href="somepage.html">

Answer 2

Colorbox actually operates on a .live() handler that listens for clicks on elements with the cboxElement class. Since it gets the href off the element and adds that class, it's not <a> dependent, you can just do:

<map name="mymap" id="mymap">
   <area shape="rect" coords="496,500,729,523" href="myPage.html">
</map>

And your jQuery to bind these in one go, no need on a class for each <area>, for example:

$(function(){
  $("#mymap area").colorbox({width:"95%", innerHeight:344, iframe:true});
});