Question

i am building a workout website that tracks exercises. Each exercise has a mapping to a certain part of the body (bench press –> Chest)

I am trying to figure out a way to visualize this and i thought of the idea of putting an image of a person “highlighting” the affected muscles. Sort of like This:

_{(source: aquaviews.net)}

Assuming i have found a good picture without any areas highlighted, is there anyway to dynamically “highlight” areas in a picture (the red section) with javascript (client side) or C# (server side) or do i need a seperate picture for every exercise?

Answer 1

You COULD overlay the the base image with SVG or a <canvas> element.

But then you have cross-browser issues, possible alignment problems, and probably a cheesy look.

I’d have an artistically inclined person do the highlights as a separate graphic for each exercise.

But rather than have these as separate images, keep/combine them in a single file — as a CSS Sprite. Then you get a professional appearance, great cross-browser support and easy, minimal coding.