在图像区域上创建链接

Question

我想将图片中的某个区域设置为可点击区域，以转到其他页面。

我使用的是以下图片：

我希望头部区域有一个指向另一页的锚点。

我读过：

I can't click an area map if it is created with `React`?

Clickable link on specific area of an image

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;

我看到地图和区域元素在屏幕上都不可见，并在Web开发人员工具上检查它们，我看到它们偏移并且宽度为0：

你可以给我一个提示，建议或帮助吗？谢谢。

Answer 1

检查以下链接https://codesandbox.io/s/o9z00v13yz usemap是否按预期工作..