时间戳

首页 > 解决方案 > 相对图像映射

javascript - 相对图像映射

问题描述

所以大家好。
我试图将图像放在网页上并使其部分可点击。
我找到了这个网站，它非常方便。然后我添加了一个小 jquery 并使这些部分成为一个按钮等。
但问题是我希望这个图像能够以不同尺寸和比例的显示器正确显示。
该站点的坐标是绝对的，您知道这对于使页面具有响应性并不是一件好事。
有没有办法让这些坐标以某种方式相对？（我相信这很可能不是解决方案）
或者是否有任何其他方法可以使图像的一部分可点击并保持图像响应的页面？
非常感谢 ：）

标签： javascripthtmlcssfrontendposition

解决方案

这是一个简单的例子，而不是我之前链接的笔，使用 scale()、margin 和 mediaqueries 来重置它们的值。

由于变换对变换元素使用的原始大小和空间没有影响，因此如果重新缩放它，它使用的房间不会。边距可以超过它，增加它周围的边距，同时扩大以推开东西，并以负值减少边距，同时缩小以拉动它周围的东西。

img {
  border: solid;
  display: block;
  margin: auto;
}

@media screen and (min-width:250px) {
  img {
    transform: scale(0.5);
    margin: -75px -125px;
  }
}

@media screen and (min-width:500px) {
  img {
    transform: scale(0.8);
    margin: -30px -50px;
  }
}

@media screen and (min-width:800px) {
  img {
    transform: scale(1.5);
    margin: 75px 125px;
  }
}

@media screen and (min-width:1200px) {
  img {
    transform: scale(2);
    margin: 150px -250px;
  }
}

map {/* for the demo, wrap it and use a div to avoid funny behaviors */
  display: grid;
  justify-content: center;
}
<map name="map_example">
  <area shape="rect" coords="98,60,375,220" href="#sunny" alt="Sun">
  <img src="https://th.bing.com/th/id/R27c41ba1d38afc9894a202c4d1dfdf7f?rik=941mYlhkC070wQ&riu=http%3a%2f%2fwww.thesmartbaby.com%2f_borders%2fgreenrectangle.jpg&ehk=YSaA6ZnTbw02zKN1w%2b9P5cze61mc4XAJ4YpPeX7inO0%3d&risl=&pid=ImgRaw"    alt="image map example" width='500' height='300' usemap="#map_example">  
</map>

如果您需要在图像上添加可见元素，您可以使用网格（或绝对定位）并且地图变得不必要（区域不应该由浏览器显示）。该方法是重新缩放时相同的重置边距。

* {
  margin: 0;
  box-sizing: border-box;
}

div {
  display: grid;
  justify-content: center;
  width: 500px;
  height: 300px;
}

a,
img {
  grid-row: 1;
  grid-column: 1;
  border: solid;
}

a {
  width: 280px;
  height: 160px;
  margin: 60px 0 0 97px;
  background: linear-gradient(to bottom left, rgba(100, 200, 50, 0.5), gray, rgba(255, 125, 0, 05));
  /*chrome*/ position:relative;
}

a:hover {
  background: none;
}

@media screen and (min-width:250px) {
  div {
    transform: scale(0.5);
    margin: -75px -125px;
  }
}

@media screen and (min-width:500px) {
  div {
    transform: scale(0.8);
    margin: -30px -50px;
  }
}

@media screen and (min-width:800px) {
  div {
    transform: scale(1.5);
    margin: 75px 125px;
  }
}

@media screen and (min-width:1200px) {
  div {
    transform: scale(2);
    margin: 150px 250px;
  }
}
<div>
  <img src="https://th.bing.com/th/id/R27c41ba1d38afc9894a202c4d1dfdf7f?rik=941mYlhkC070wQ&riu=http%3a%2f%2fwww.thesmartbaby.com%2f_borders%2fgreenrectangle.jpg&ehk=YSaA6ZnTbw02zKN1w%2b9P5cze61mc4XAJ4YpPeX7inO0%3d&risl=&pid=ImgRaw" alt="image map example"
    width='500' height='300' usemap >
  <a href="#sunny"> green rectangle</a>
</div>

您可以删除 usemap 属性。我为图像离开这里并添加了一个像链接一样变成蓝色的边框。看起来这张图片预计是 Firefox 其他地方的链接:)。

推荐阅读