Using one single image with multiple hyperlinks

[andredm7]

Hello all,

I'm fairy new to Markdown Pro world. I'm working with Markdown pro + github to publish my articles. I'm trying to make one single image that has 8 chevrons, and I want to make it "clickable".
My idea is to have each one of the chevrons with a hyperlink, pointing to a different article. I've gathered the image coordinates to make that happen, so my question is from the Markdown syntax/language standpoint:

How do I add this piece of code (as an example) to reflect markdown pro language/syntax?

Code:

Image map test

Click one of the links to go to the web page:

Thanks in advance!

[jay]

Hi Andredm7,

I do exactly this with Markdown - we have complex images, with an Image Map to allow hyperlinks per shape.

There a couple of ways to do this:
1) Use MS Visio to create your diagram
- Create your visio diagram with shapes, and add hyperlinks to each shape
- Save Visio diagram as the diagram as web (html).
This creates a sub-directory Diagram_files\ with png_1.png and png_1.htm
- Open up the png_1.htm in text editor and copy the section <MAP NAME="visImageMap"> to </MAP>
- Paste this section into the bottom of your Markdown .md file.
- At the top of your markdown file, use the html <img> tag to display your image with associated map:
<img src="Diagram_files/png_1.png" usemap="#visImageMap1" />
- When you view this in Chrome, with a Markdown renderer, the<img> and <MAP> tags are passed-through to the html processor and the image shapes become 'clickable'.
- Try it with Chrome and Markdown Preview Plus extension
- This should work on Github too - if they allow the <img> and <MAP> tags- let me know if it works on GitHub!

2) If you don't want to use MS Visio, use another drawing tool that can produce diagrams and export to html with Image maps:
https://www.smartdraw.com/ - Cheaper, very similar to / better than Visio
or www.image-maps.com/ - Very Basic, never used it.