Make workflow diagram clickable
We made some progress on this but didn't merge the MR - !67804 (closed)
We can use https://www.image-map.net/ to create the image map, however, the image is displayed at around 70% of the page width and the image map areas do not scale down, so the hotspots don't overlap with their parts of the diagram.
The HTML looks like this:
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="PDF-Diagram.svg" usemap="#image-map">
<!-->
<map name="image-map">
<area target="_self" alt="Validation Backlog" title="Validation Backlog" href="/handbook/product-development-flow/product-development-flow-draft.html#validation-phase-1-validation-backlog" coords="175,253,305,333" shape="rect">
<area target="_self" alt="Problem Validation" title="Problem Validation" href="/handbook/product-development-flow/product-development-flow-draft.html#validation-phase-2-problem-validation" coords="92,197,65" shape="circle">
<area target="_self" alt="Design" title="Design" href="/handbook/product-development-flow/product-development-flow-draft.html#validation-phase-3-design" coords="166,81,43" shape="circle">
<area target="_self" alt="Solution Validation" title="Solution Validation" href="/handbook/product-development-flow/product-development-flow-draft.html#validation-phase-4-solution-validation" coords="388,198,64" shape="circle">
<area target="_self" alt="Plan" title="Plan" href="/handbook/product-development-flow/product-development-flow-draft.html#build-phase-1-plan" coords="538,159,672,242" shape="rect">
<area target="_self" alt="Develop and Test" title="Develop and Test" href="/handbook/product-development-flow/product-development-flow-draft.html#build-phase-2-develop--test" coords="679,73,811,154" shape="rect">
<area target="_self" alt="Launch" title="Launch" href="/handbook/product-development-flow/product-development-flow-draft.html#build-phase-3-launch" coords="820,160,951,239" shape="rect">
<area target="_self" alt="Improve" title="Improve" href="/handbook/product-development-flow/product-development-flow-draft.html#build-phase-4-improve" coords="677,251,812,332" shape="rect">
</map>
Notes
- When copy/pasting from image-map.net, you will have to remove the indentation and re-add it from the beginning of each line.
- The source file for the diagram is in Figma.
Edited by Jacki Bauer