How to get a iframe in an Image Map?

Question

I have been working on the side bar where it says Click On Game Lists Below on http://www.bespoke-arcades.co.uk/store/arcade-machines/16-synergy-elite-arcade-machine.html on the left hand side.

I have an image map because I would rather have one image downloaded than a ton (as it slows down loading times).

But the image map won't allow me to use class="iframe" in the <area> tag. If I do <a href="xxx" class="iframe"><img src="yyy" /></a> it will work and open up a fancybox iframe popup, but if I use the imagemap the class="iframe" function isn't really accepted.

Is there any work around to making this work? I have the fancybox js and css on the page in question. I also have the correct javascript to work if I use that class function.

Answer 1

Try changing this :

<script type="text/javascript">
$('a.iframe').fancybox();
</script>

by this :

<script type="text/javascript">
jQuery(document).ready(function($){
    $('area.iframe').fancybox({
        "type":"iframe",
        "width": 600, // or whatever
        "height": 380
    });
});
</script>

... of course, don't forget to add class="iframe" to each area tag.

Also check this answer or this for further reference.