在图像的一部分上创建超链接

Question

我的页脚中有一个背景图片，里面有许多不同的图像。我想使用html或css创建每个图像的相应网站的链接，但我不知道如何。我被告知可以这样做。这是可能的，还是我需要将图像分成多个？

Answer 1

您可以使用HTML Map tag

一个例子是：

<img src="GJ7SG.png" alt="" usemap="#map" />
<map name="map">
    <area shape="rect" coords="788, 2, 867, 37" alt="Sun" href="someurl.htm"/>
    <area shape="rect" coords="608, 1, 719, 37" alt="Sun" href="anotherurl.htm" />
    <area shape="rect" coords="374, 0, 501, 39" />
    <area shape="rect" coords="168, 0, 312, 38" />
    <area shape="rect" coords="1, 7, 87, 39" />
</map>

你必须做一些游戏才能得到你想要的但是这应该让你开始。

将href添加到每个矩形。您可以在此处生成地图： https://developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/365ccfd644f2b008c33f0046d2ba1a8f/summer-html-image-ma_1355318513_demo_package/index.html

Answer 2

尝试使用HTML图片地图：

<img src="img" usemap="#mymap" />
<map name="mymap">
    <area shape="rect" coords="0,0,200,300" href="linkurl" title="sometitle" alt="Hovertext" />
    ...
</map>

您可能需要将图像添加到前台才能使其正常工作