Search code examples
javascriptjqueryhtmlimagemap

Better way to make a overlay-image-map?

My objective is to have an image on the screen, and as the user mouses over various polygons they will get a blue-ish overlay over the polygon they are mousing over.

Take this image as an example:

enter image description here

I envision writing code like this:

<img src="planets.gif" width="145" height="126" usemap="#polymap">
<img id="StarOverlay" src="StarOverlay.png" style="position:absolute;top:30px;left:59px;display:none;"/>

<map name="polymap">
    <area id="star" shape="poly" coords="0,0,82,126"  alt="Star">
    <area shape="circle" coords="90,58,3"  alt="Circle">
    <area shape="Rectangle" coords="124,58,8"  alt="Square">
    <area shape="Rectangle" coords="124,58,8"  alt="Square">
</map>

$(document).ready(function () {
    $('#star').hover(function () {
        $('#StarOverlay').show();
    }, function () {
        $('#StarOverlay').hide();
    });
});

However, I will need to make very detailed overlays for each and take very special care with the mappings. I need to do 15 images with over 40 mappings on each one, so this will be very time consuming (I estimate it will take me a month or better).

Is there a better way using say HTML5? or any other HTML features to accomplish this without having to build these maps and image overlays in photoshop?

Solution

  • I'd say you're better off with SVG [instead of CSS shapes] - both when it comes to browser support, and ease of use (from the developer perspective.) And maybe even usability-wise, because you can put links directly into it (see f.e. https://www.w3.org/wiki/SVG_Links)

    Hover effects could be handled directly inside SVG as well, as long as you embed it via the svg element, so that it can easily be controlled from within the main document's stylesheet.

    Getting the shapes to start with should be possible using any halfway decent graphics program/editor that can handle vector graphics/SVG, like inkscape or illustrator. Those tend to include a lot of bloat into their saved SVG files though, so you might want to minify/shrink your SVG before putting it onto the web - https://jakearchibald.github.io/svgomg/ is an easy to use online tool for that (for more frequent use you could look at the command line tool it's based on.)