CODEWITHSUNDEEP
javascriptjqueryhtml
Owen
Owen

Reputation: 7577

JQuery with HTML imagemap

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>

Upvotes: 0

Views: 1651

Answers (2)

Nick Craver
Nick Craver

Reputation: 630379

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});
});

Upvotes: 2

casablanca
casablanca

Reputation: 70701

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">

Upvotes: 2

Related Questions