Создать ссылку на область изображения

Question

Я хотел бы установить область на изображении в качестве интерактивной области для перехода на другую страницу.

Я использую следующее изображение:

Мне бы хотелось, чтобы в области головы была привязка, указывающая на другую страницу.

Я прочитал:

Я не могу щелкнуть карту областиесли он создан с помощью `React`?

кликабельная ссылка на определенную область изображения

https://reactjs.org/docs/dom-elements.html

И у меня естьнаписано:

import React from 'react';
import CaballoSegmentado from '../images/CaballoSegmentado.PNG';


const CoverPage = () => (
    <div>
        <img className='coverImage' src={CaballoSegmentado} useMap='map'>
        </img>
        <map name='#map'>
            <area alt="" title="" href="/scenePage" shape="poly" coords="1025,12,1035,175,1277,186,1248,26"/>
        </map>
    </div>
);

export default CoverPage;

Я вижу, что элементы карты и области не видны на экране, и, осматривая их с помощью инструментов веб-разработчика, я вижу их со смещением и шириной 0:

Не могли бы вы дать мне подсказку, совет или помощь, пожалуйста?Спасибо.

Answer 1

Проверьте по ссылке ниже https://codesandbox.io/s/o9z00v13yz usemap работает только как ожидалось ..