Fancybox on Image Map Items

JavaScript
1

I’m attempting to use an image map to create a series of links that all open to a Fancybox inline lightbox. So when a link in the image map is clicked, the content of a hidden div appears in the lightbox. Doesn’t seem like it should be all that complicated.

Image map code:

<map id="_Image-Maps_9201211012043314" name="Image-Maps_9201211012043314"><area shape="rect" coords="0,360,50,410" href="#map1" class="fancybox" alt="" title=""    /></map>

Hidden div code:

<div id="#map1" style="display: none;">Location 1</div>

Fancybox code (in head):

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

What happens when I click on the image map link is the lightbox opens, but with the error message “The requested content cannot be loaded. Please try again later.” It seems as though Fancybox is looking for an a tag and following the href to get the ID of the div to display inline, but because that a tag doesn’t exist (image map tag instead) it can’t load the content. That’s my theory anyway.

Has anybody ever run into this before or familiar enough with Fancybox/jQuery to offer up a suggested fix?

Thanks!
Jeff

2

I’m not sure that fancybox supports image maps… they’re a bit … yuck anyway.

Another solution that might work well for you is just overlaying links over the top of an image, it’s probably not much more work than doing an image map and will be much more accessible and importantly in your case, much easier to get to work with Fancybox.

3

Good point. I’m not exactly a fan of image maps but this is a quick and dirty project that I thought might be able to make them work. I’ll do some absolute positioning with real links on the image and that should be just fine.

Thanks for the help!

4

Turns out the image map idea will work, but it helps if I declare the id of the content div correctly (without the #)

<div id="map1" style="display: none;">Location 1</div>
5

aha, yes! I didn’t even notice that.