HTML - 使图像连接

Question

我有一堆图像，它们彼此紧挨着形成一个导航栏。没有间隙，所以它看起来像一个图像，同时能够使它的某些区域可点击，而其他区域则不能。如果导航栏对于窗口而言太长，我该如何做到这一点，它会变得更小，而不是让一些图像换行？

HTML/CSS:

.navbar-button {
  margin: 0;
  padding: 0;
  display: inline block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  height: 10%;
}

<center>
  <img src="Images/NavBar1.png" alt="" class="navbar-button" />
  <a href="Home.html">
    <img src="Images/NavBar2.png" alt="" class="navbar-button" />
  </a>
  <img src="Images/NavBar3.png" alt="" class="navbar-button" />
  <a href="Information.html">
    <img src="Images/NavBar4.png" alt="" class="navbar-button" />
  </a>
  <img src="Images/NavBar5.png" alt="" class="navbar-button" />
  <img src="Images/NavBar6.png" alt="" class="navbar-button" />
  <img src="Images/NavBar7.png" alt="" class="navbar-button" />
  <a href="Schedule.html">
    <img src="Images/NavBar8.png" alt="" class="navbar-button" />
  </a>
  <img src="Images/NavBar9.png" alt="" class="navbar-button" />
  <a href="#" onClick="document.getElementById('id01').style.display='block'">
    <img src="Images/NavBar10.png" alt="" class="navbar-button" />
  </a>
  <img src="Images/NavBar11.png" alt="" class="navbar-button" />
</center>

Answer 1

与其尝试防止多张图片换行，不如看看在单张图片上定义可点击区域的可能性。您可以定义具有不同可点击区域的 map 。请看下面的示例，其中实际上只有文本周围的区域是可点击的:

<img src="https://dummyimage.com/600x400/000/fff" usemap="#map">

<map name="map">
  <area shape="rect" coords="100,150,500,250" href="#">
</map>

您还可以定义不同的形状和大小，为了更好地理解，只需看一下 documentation

另请注意

如果您将坐标定义为像素，当您调整图像大小时，这会导致不同的可点击区域。 StackOverflow 上还有另一个问题，关于 how to create responsive image maps 的讨论很有帮助。