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
Post a Comment