markdown - Using an image map in a github readme.md file -


is there option include image in readme.md file, has usemap attribute?

pure html be

<img src="myimage.png" usemap="#mymap"/> <map name="mymap">   <area coords="1,1,40,40" href="mylink.html"/> </map> 

i can't work multiple reasons

  • usemap retained attribute map-block removed. not surprising map-tag not on html whitelist, if not mistaken.
  • an image map cannot inside anchor tag github markdown renders a-tag pointing raw file location , img-tag inside.

i don't see option, you?

okay, sort of solution , advice use css, not img's usemap attribute.

the best answer came using github pages - these static web pages hosted github , therefore can want there.

https://help.github.com/articles/creating-a-github-pages-site-with-the-jekyll-theme-chooser/

this creates new branch gh-pages , html files used. convenient not have checkin master branch changes.

the endresult not image map inside readme.md file, there have added link github-pages index.html using imagemap. imagemap points various github resources. not inline readme.md 1 click away.

second finding: don't use image maps css instead. imagemap coords depend on width of image rendered browser, not on width of image itself. in github standard use max-width style property, image gets scaled down - , coords of imagemap not.

much better use css - see "responsive image maps" - , percent values.

<p style="position: relative;">   <img ....>   <a style="position: absolute; top: 10%; left: 10%; width: 30%; height: 15%" href=....></a> </p> 

as both, image , anchor tag inside block element of position relative , anchor tag of position absolute, anchor position scaled image.


Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -