如何使图像区域包含html css javascript中的链接？

Question

您好，这是我第一次尝试创建网站，所有这些不同的语言似乎有点让人不知所措。我有一些编程 gui 的经验，我不得不说 css 的几何管理器对我来说似乎非常奇怪。

无论如何我的目标页面是：

• 要以有序的方式显示图像，图像是 svg。
• 能够重新组织图像网格以使其更大或更小。
• 将图像放入数组中，这样编辑页面会更容易。
• 能够在每张图片的某个区域放置链接。

到目前为止，我已经完成了除了最后一个之外的所有点，我不知道如何在每张图片的某个区域放置一个可点击的链接。

我已经看到我可以在地图上使用区域标签，但据我所知，坐标必须是绝对值并且不能相对于图像，这意味着当图像改变大小时，区域将是错误的。

我也尝试将链接直接放在我想要的 svg 文件的元素中，但由于某种原因在 html 文件中不起作用。

有什么建议吗？

这是我目前所拥有的：

// Create images
var images_names = ["Images/article_0.svg", "Images/article_1.svg", "Images/article_2.svg", "Images/article_3.svg", "Images/article_4.svg",
  "Images/article_5.svg", "Images/article_6.svg", "Images/article_7.svg", "Images/article_8.svg"
]
var i;
for (i = 0; i < images_names.length; i++) {
  var img = document.createElement('img');
  img.src = images_names[i];
  document.getElementById('container').appendChild(img);
}
// Create Maps

// Geometry functions
function two() {
  var i;
  var elements = document.getElementsByTagName("img");
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "49%"; // IE10
  }
}

function four() {
  var i;
  var elements = document.getElementsByTagName("img");
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "24%"; // IE10
  }
}

function eight() {
  var i;
  var elements = document.getElementsByTagName("img");
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "12%"; // IE10
  }
}

function sixteen() {
  var i;
  var elements = document.getElementsByTagName("img");
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "6%"; // IE10
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

img {
  width: 24%;
  top: 0;
}

.header {
  text-align: center;
  padding: 32px;
  position: sticky;
  top: 0;
  background-color: white;
}

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: space-between;
}

<!-- Header -->
<div class="header">
  <h1>TITLE</h1>
  <p>Click on the buttons to change the grid view.</p>
  <button onclick="two()">2</button>
  <button onclick="four()">4</button>
  <button onclick="eight()">8</button>
  <button onclick="sixteen()">16</button>
</div>

<div id="container">
</div>

Answer 1

在问题中提供更多细节会非常有帮助。

但是，根据给定的描述，我已尝试为您创建一个工作原型。它可以让您控制每个单独的图像坐标，您可以根据您的要求相对于每个图像调整位置。

HTML（无变化）

<!-- Header -->
<div class="header">
    <h1>TITLE</h1>
    <p>Click on the buttons to change the grid view.</p>
    <button onclick="two()">2</button>
    <button onclick="four()">4</button>
    <button onclick="eight()">8</button>
    <button onclick="sixteen()">16</button>
</div>

<div id="container">
</div>

Javascript（已更改）：

1. 在第一个 for 循环中添加了一个图像容器，用于将图像相互隔离并获取相对坐标。

2. 将 usemap 属性分配给 img 标签，并将我们为每个图像动态生成的图像映射名称作为值。

3. 创建了一个函数 createMaps()，它将：

   3.1。遍历每个图像容器并获取第一个子元素，即 img 元素。

   3.2。获取每个图像的宽度和高度，计算可点击区域的 XY 坐标并将其存储在 xCord、yCord 变量中。

   3.3。使用半径变量来定义圆形可点击区域的大小。

   3.4。在每个图像容器内创建一个图像映射元素，并为它们分配与第 2 点相同的名称。

   3.5。在地图元素内创建一个区域元素并将其形状设置为圆形，并使用第 3.2 点中的计算值以格式（x 轴、y 轴、半径）进行坐标。

   3.6。在整个页面加载完成后调用 createMap() 函数，以避免图像加载延迟时图像的宽度/高度为 0。

   3.7。在每个 Geometry 函数中调用 createMap() 函数以使用调整大小的图像重新生成地图。

for (var i = 0; i < images_names.length; i++) {
    var imgcontainer = document.createElement("div");
    imgcontainer.setAttribute("class", "imgcontainer");
    document.getElementById('container').appendChild(imgcontainer);

    var img = document.createElement('img');
    img.src = images_names[i];
    img.setAttribute("usemap", `#imgmap${i}`);
    imgcontainer.appendChild(img);
}

window.onload = function() {
    createMaps();
}

// Create Maps
function createMaps() {
    var elem = document.getElementsByClassName("imgcontainer");
    for (var i = 0; i < elem.length; i++) {
        var img = elem[i].children[0];
        var xCord = img.width * 15 / 100;
        var yCord = img.height * 15 / 100;
        var radius = 10;

        var imap = document.createElement("map");
        imap.setAttribute("name", `imgmap${i}`);
        elem[i].appendChild(imap);

        var area = document.createElement("area");
        area.setAttribute("shape", `circle`);
        area.setAttribute("title", `Click me`);
        area.setAttribute("href", `javascript:alert(1);`);
        area.setAttribute("coords", `${xCord},${yCord},${radius}`);
        imap.appendChild(area);
    }
}

// Geometry functions
function two() {
    var i;
    var elements = document.getElementsByClassName("imgcontainer");
    for (i = 0; i < elements.length; i++) {
        elements[i].style.width = "49%"; // IE10
    }
    createMaps();
}

function four() {
    var i;
    var elements = document.getElementsByClassName("imgcontainer");
    for (i = 0; i < elements.length; i++) {
        elements[i].style.width = "24%"; // IE10
    }
    createMaps();
}

function eight() {
    var i;
    var elements = document.getElementsByClassName("imgcontainer");
    for (i = 0; i < elements.length; i++) {
        elements[i].style.width = "12%"; // IE10
    }
    createMaps();
}

function sixteen() {
    var i;
    var elements = document.getElementsByClassName("imgcontainer");
    for (i = 0; i < elements.length; i++) {
        elements[i].style.width = "6%"; // IE10
    }
    createMaps();
}

CSS（已更改）：

1. 添加了 imgcontainer 类并分配了 24% 的默认宽度，并设置相对位置以保持其正常位置，以匹配图像映射中分配的坐标。
2. img 元素宽度设置为 100% 以占据容器的整个宽度并保持纵横比。

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.imgcontainer {
    width: 24%;
    position: relative;
}

img {
    width: 100%;
    top: 0;
}

.header {
    text-align: center;
    padding: 32px;
    position: sticky;
    top: 0;
    background-color: white;
}

#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: space-between;
}

在此处检查工作原型： https://jsfiddle.net/manask/3ujsrp71/。只需将鼠标悬停在每个图像上，当光标变为指针/手时单击即可。

如果对代码/实现有任何疑问，请告诉我。