时间戳

首页 > 解决方案 > 如何将多个链接添加到图像的某些部分

javascript - 如何将多个链接添加到图像的某些部分

问题描述

我将如何向图像添加多个链接。链接图像我会用a href. 我会有一张带苹果的树的图像，然后我想为图像中的每个苹果添加一个链接。我该怎么做？

我正在考虑使用绝对位置，但似乎很乏味，尤其是在尝试使其移动响应移动链接时。

标签： javascripthtmlcss

解决方案

Apple Tree

You can use Image Map Generator

.wrap {
    transform: scale(0.3);
    width: 0px;
    height: 0px;
}
<div class="wrap">
    <img src="https://www.freepngimg.com/thumb/tree/76337-vector-fruit-tree-apple-download-free-image.png"
        usemap="#image-map">

    <map name="image-map">
        <area target="" alt="" title="" href="#1" coords="626,247,775,130" shape="rect">
        <area target="" alt="" title="" href="#2" coords="495,265,632,378" shape="rect">
        <area target="" alt="" title="" href="#3" coords="620,437,750,558" shape="rect">
        <area target="" alt="" title="" href="#4" coords="346,829,467,931" shape="rect">
        <area target="" alt="" title="" href="#5" coords="579,937,707,1041" shape="rect">
        <area target="" alt="" title="" href="#6" coords="885,289,1029,386" shape="rect">
        <area target="" alt="" title="" href="#7" coords="1082,540,1210,652" shape="rect">
        <area target="" alt="" title="" href="#8" coords="1268,926,1403,1035" shape="rect">
        <area target="" alt="" title="" href="#9" coords="1025,1096,1171,1206" shape="rect">
    </map>
</div>

推荐阅读