looking for suggestions on how i can highlight areas on an image

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:

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 can use css to position your links over said muscle group and use a rollover to show the highlighed part...

Edit: Sorry I guess I should have elaborated. You can absolutely position the elements with CSS and use an image rollover to swap out that section of the image to the highlighted section of that image. You can either do this by putting each muscle group into it's own div and putting an image of the corresponding muscle group into the background image. Then swap it out on rollow over. or you can use z-index and absolutely position the rollover elements where they need to be and change the z-index when needed.

Answer 2

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.

Answer 3

i think you seeking a way to do this without requiring separate images, and if so - the answer is No - you are going to need to create separate images for at least the highlighted areas. Short of perhaps using a CANVAS element which has cross-browser issues, I don't believe there is any way to impose a filter to an arbitrary region of an image element.

And even if you Could apply an alpha filter, you would still need the geometry of every shape, so the effort/work is perhaps the same...

Once you have the various images there are sundry ways to approach the problem after that...

Answer 4

Interestingly enough, I used to be a personal trainer and I did this same thing but did it in flash. That's my recommendation.

However, if you want to do it with JS and CSS, Brock's suggestion of the sprites is likely the way to go.

What you could do, very simply, would be to have an image map that for certain areas called a js function to swap about the background image with the same version of that image with the highlighted sections. Rather than several small images, you have the same image but with one part highlighted.

One question though, will you be doing compound exercises that would require you to have two sections highlighted? For instance, an incline press would highlight part of the chest and part of the delts. This makes the whole proposition more complicated due to the specificity of your roll overs.