How to responsively tie an HTML element to an image map?

Right now I have a background image that includes some of our staff. The goal is to display text bubbles when a user hovers over one of the people in the image. Currently we are using an image map to create clickable areas over the staff members.

On a normal desktop size page load this works fine but when we change the page size the speech bubbles drift and do not line up with their corresponding image map area. Ideally when the staff members get bigger or smaller the speech bubble would line up with their face.

Here's a simplified code snippet to give a sense of our page structure:

<div class="container-image-map">
    <img class="holiday-card" src="Xmas_Card.jpg" alt="" width="2400" height="1500" usemap="#holidaycard"/>
    <map name="holidaycard">
        <area shape="poly" coords="1235,408,1232,433,1024,431,1045,374,1100,342,1083,207,1222,212,1267,309,1292,321,1316,384"  data-person="dave" alt="Dave">
    </map>
    <div class="shape shape-dave" id="dave">
        <div class="speech-bubble">
            <h2 class="person-name">Dave</h2>
            <p class="person-copy">Speech bubble text</p>
        </div>
    </div>
</div>

Here is the link to the project: http://holidaycard.dhxadv.com/

Solution

If you set your position in percentage then you'd want to use the same percentage for your bubble sizes. That'd be like this:

.shape.shape-mackenzie
{
    left: 58%;
    top: 26%;
    width: 17%;
    height: 20%;
}

Don't forget to remove your min-width and max-width properties. Also note that this approach doesn't help you with text scaling, you'll have to switch to SVG for that or use Media Queries.