Utilisation d'une image cliquable dans un fichier readme.md de github

Question

Existe-t-il une option pour inclure une image dans un fichier readme.md, qui a un attribut usemap?

html pur serait

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

Je ne peux pas que travailler pour de multiples raisons

• usemap est retenu comme attribut, mais la carte-bloc est retiré. Pas étonnant que la balise map ne soit pas sur la liste blanche html, si je ne me trompe pas.
• Une carte d'image ne peut pas être à l'intérieur d'une balise d'ancrage, mais github démarquage il rend comme une étiquette indiquant l'emplacement du fichier brut et le img-étiquette à l'intérieur.

Je ne vois pas une option, pensez-vous?

Answer 1

D'accord, une sorte de solution et les conseils d'utiliser CSS, pas img attribut de usemap.

La meilleure réponse que je suis venu avec l'aide de pages a été GitHub - ce sont des pages web statiques hébergées par github et donc vous pouvez faire tout ce que vous voulez là-bas.

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

Cela crée une nouvelle branche gh-pages et seuls les fichiers html sont utilisés. Très pratique car vous n'avez pas à vous enregistrer dans la branche master pour les changements. Le résultat final n'est pas une image dans le fichier README.MD, mais j'ai ajouté un lien vers le fichier github-index.html qui utilise le plan imagemap. L'imagemap pointe vers les différentes ressources github. Donc, ne pas intégrer le README.MD mais un clic.

Deuxième constatation: N'utilisez pas d'images mais CSS à la place. Les coordonnées d'Imagemap dépendent de la largeur de l'image rendue par le navigateur et non de la largeur de l'image elle-même. Comme dans github, la norme est d'utiliser une propriété de style max-width, l'image est souvent réduite - et les coordonnées de l'imagemap ne le sont pas.

Il est préférable d'utiliser CSS - voir "responsive image maps" - et les pourcentages.

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

A la fois, l'image et la balise d'ancrage sont à l'intérieur d'un élément de bloc qui est de la position relative et la balise d'ancrage est d'une position absolue, la position d'ancrage est mis à l'échelle avec l'image.