Hi,
I am new to both this platform as well as the majority of its excercises. Therefor I often need to look up how to do a certain excercise (correctly). At first I thought I could click on an excercise to view the instruction. But that ain't possible because it is one big image. I understand that chopping up all these images and re-upload them, formatting them with html to align properly etc. is a hell lot of work. But I thought using image maps would be an easy method to get this workflow. I made one in a few minutes, for one of the programs I currently follow. Which I wanted to share as an explanation to those savy with html.
This code makes all excercises from the following image clickable and direct them to the associated instruction video's. Theoretically it would also be possible to show the video when hovering over the excercise but that is a little bit more set-up work.

I am really curious what you all think of this idea.
- Jeffrey
I am new to both this platform as well as the majority of its excercises. Therefor I often need to look up how to do a certain excercise (correctly). At first I thought I could click on an excercise to view the instruction. But that ain't possible because it is one big image. I understand that chopping up all these images and re-upload them, formatting them with html to align properly etc. is a hell lot of work. But I thought using image maps would be an easy method to get this workflow. I made one in a few minutes, for one of the programs I currently follow. Which I wanted to share as an explanation to those savy with html.
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://darebee.com/images/programs/hero-journey/page/day16.jpg" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Hundreds excersice video" title="Hundreds excersice video" href="https://darebee.com/exercises/hundreds-exercise.html" coords="76,432,328,728" shape="rect">
<area target="_blank" alt="Air bike crunches video" title="Air bike crunches video" href="https://darebee.com/exercises/air-bike-crunches.html" coords="339,431,565,729" shape="rect">
<area target="_blank" alt="Flutter kicks video" title="Flutter kicks video" href="https://darebee.com/exercises/flutter-kicks.html" coords="571,431,805,731" shape="rect">
<area target="_blank" alt="Leg raises video" title="Leg raises video" href="https://darebee.com/exercises/leg-raises.html" coords="74,743,328,992" shape="rect">
<area target="_blank" alt="Scissors video" title="Scissors video" href="https://darebee.com/exercises/scissors-exercise.html" coords="336,736,577,992" shape="rect">
<area target="_blank" alt="Sitting twists video" title="Sitting twists video" href="https://darebee.com/exercises/sitting-twists.html" coords="583,736,825,992" shape="rect">
<area target="_blank" alt="Superman stretches video" title="Superman stretches video" href="https://darebee.com/exercises/superman-stretch.html" coords="782,1239,424,1035" shape="rect">
</map>
<img src="https://darebee.com/images/programs/hero-journey/page/day16.jpg" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Hundreds excersice video" title="Hundreds excersice video" href="https://darebee.com/exercises/hundreds-exercise.html" coords="76,432,328,728" shape="rect">
<area target="_blank" alt="Air bike crunches video" title="Air bike crunches video" href="https://darebee.com/exercises/air-bike-crunches.html" coords="339,431,565,729" shape="rect">
<area target="_blank" alt="Flutter kicks video" title="Flutter kicks video" href="https://darebee.com/exercises/flutter-kicks.html" coords="571,431,805,731" shape="rect">
<area target="_blank" alt="Leg raises video" title="Leg raises video" href="https://darebee.com/exercises/leg-raises.html" coords="74,743,328,992" shape="rect">
<area target="_blank" alt="Scissors video" title="Scissors video" href="https://darebee.com/exercises/scissors-exercise.html" coords="336,736,577,992" shape="rect">
<area target="_blank" alt="Sitting twists video" title="Sitting twists video" href="https://darebee.com/exercises/sitting-twists.html" coords="583,736,825,992" shape="rect">
<area target="_blank" alt="Superman stretches video" title="Superman stretches video" href="https://darebee.com/exercises/superman-stretch.html" coords="782,1239,424,1035" shape="rect">
</map>
I am really curious what you all think of this idea.
- Jeffrey
Comment