Question

I need to display some graphical chart data on a website. In these charts are several images that when clicked on should display a larger version of the image. The charts themselves are currently saved as a single image file.

My initial thoughts are to use an imagemap to specify where the images are in the overall chart image and then use jQuery to highlight around the edge of the images. Then using something like lightbox or fancybox display the larger version clicked on image.

What I would appreciate is some insight as to whether this is the best way to achieve the desired result or if there is a better technique?

Thanks

Answer 1

Why not just use a tooltip?

Here is an example using qTip2, with some borrowed code 😉

HTML

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="#" title="<img src='sun.gif'>" />
    <area shape="circle" coords="90,58,3" alt="Mercury" href="#" title="<img src='merglobe.gif'>" />
    <area shape="circle" coords="124,58,8" alt="Venus" href="#" title="<img src='venglobe.gif'>" />
</map>

Script

$('area').qtip({
    position: {
        my: 'left center',
        at: 'right center',
        target: $('img')
    }
});