Resize Images on smart phones in HTML5

I created a workflow process in Visio, saved it as a .png and inserted it into a Robohelp topic. I applied image maps (hot spots) to each box in the workflow to link to those topics. When I resize the browser to see how it will look for a tablet or smart phone, the image doesn't resize smaller when the browser does. It only resizes when the hot spots are removed.

Is there any source code or any way I can make the hot spots relative so they shrink with the image? What's a good solution to create a linked image that shrinks to size on a smart phone or tablet?