Cannot use fancy box jquery plugin for area tag in map tag in a image

Question

I am using FancyBox Jquery plugin to display popups in my website. It works fine for all anchor tags. I also want to use it for an area tag in a map tag so that I can display popups when clicked on specific part of an image. I have tried following code but it doesn't work:

<script type="text/javascript"> 
 $(document).ready(function(){ 
  $("#tag_id").fancybox(); 
 });
</script>


<map name="question_img">
 <area id="tag_id" shape="rect" coords="0,0,200,200" href="http://domain.com/ajax.txt" alt="" />
</map>

<img src='http://domain.com/image.jpg' width='100%' height='100%' usemap='#question_img'>

Please tell me what modifications I need to do in Jquery code. Thank you

There is a great answer in a question similar to yours: http://stackoverflow.com/questions/5530871/using-fancybox-with-image-map — avladov, Sep 11 '12 at 16:36
Without over complicating things, it can be as simple as this http://stackoverflow.com/a/11418310/1055987, just bear in mind that ajax calls won't work locally, you have to test them in a server. — JFK, Sep 11 '12 at 16:41
BTW, what version of fancybox are you using? ... if using v2.x here it is another answer with demo http://stackoverflow.com/a/11300063/1055987 — JFK, Sep 11 '12 at 16:44

score 0 · Accepted Answer · answered Sep 11 '12 at 17:40

0

I've used fancybox on area tag in image map and it works. try

$("area#tag_id").fancybox();

You can view my implementation on this url : Fancybox on area tag

answered Sep 11 '12 at 17:40

Faraz

156
3
13

Cannot use fancy box jquery plugin for area tag in map tag in a image

1 Answers1