Как создать карту изображений в файле разметки gitlab - PullRequest
Новая
       83

Как создать карту изображений в файле разметки gitlab

0 голосов
/ 05 мая 2020

Желаемый результат:

кликабельное изображение в markdown-файле на платформе gitlab.

Попытка 1: SVG - Встроенные ссылки - с кодом уценки

можно реализовать URL-адреса в файле svg. Я вставил ссылки с помощью inkscape. Когда я открываю изображение в браузере, оно работает как кликабельное изображение.

Я вставил изображение в файл уценки: 

 ![](img/myimage.svg)

Результат

  • Изображение не отображается

Попытка 2: SVG как ссылка 

 [link to image](img/myimage.svg)

Результат

  • диалоговое окно загрузки для загрузки файла

Попытка 3: SVG - html - imagemap 

    <!-- Image Map Generated by http://www.image-map.net/ -->
    <img src="img/myimage.svg" usemap="#image-map">

    <map name="image-map">
        <area target="_blank" alt="index" title="index" href="http://www.example.com" coords="84,35,214,71" shape="rect">
    </map>

Результат

  • изображение отображается в файле уценки
  • при нажатии на изображение появляется диалоговое окно загрузки

Попытка 4: Файл PNG - html - imagemap

загрузка svg, как указано в { ссылка }


<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="/uploads/b6ed39d194c0a6b6e91322fb388908fa/myimage.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="overview" title="overview" href="http://www.example.com" coords="84,35,214,71" shape="rect">
</map>

Результат

  • изображение видно в файле уценки
  • при нажатии на изображение браузер перенаправляется на исходный файл изображения

Попытка 5: Файл PNG - javascript обнаружение щелчка

image

Результат

  • изображение отображается в файле уценки
  • где n щелкнув изображение, браузер перенаправляется к исходному файлу изображения

Попытка 6: встроенное изображение с html imagemap 

<img src="data:image/png;base64,iVBORw......"
usemap="#image-map" >

    <map name="image-map">
        <area target="_blank" alt="index" title="index" href="http://www.example.com" coords="0,0,100,100" shape="rect">
    </map>

Результат

  • изображение НЕ отображается в файле разметки на gitlab
  • код работает в jsfiddle

Мои вопросы

  • как сделать изображение кликабельным в файле разметки на платформе gitlab?
  • Есть ли любые другие варианты сделать кликабельное изображение в уценке
...