代码之家 › 专栏 › 技术社区 › Enoy

在图像区域上创建链接

reactjs image javascript

Enoy · 技术社区 · 6 年前

我想将图像中的一个区域设置为可单击区域,以转到其他页面。

我正在使用以下图像:

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

我读过:

i can't click an area-map-if-it-is-created-with-react if it is-created`?

clickable link on specific area of an image

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

我写过:

import react from'react';
从“.../images/caballosegmado.png”导入caballosegmado;


const coverpage=()=>。(
<DIV>
<img classname='coverimage'src=caballosegmado usemap='map'>
</img>
<map name='map'>
<area alt=“”title=“”href=“/scenepage”shape=“poly”coords=“1025,12103517512771861248,26”/>
</map>
</DIV>
;

导出默认封面;
我看到地图和区域元素在屏幕上都不可见,在Web开发人员工具上检查它们时,我看到它们偏移,宽度为0:。



你能给我一个提示、建议或帮助吗?谢谢。


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

我读过:

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:



你能给我一个提示、建议或帮助吗?谢谢您。