jQuery图像映射替代

Posted 2023-05-08

【中文标题】jQuery图像映射替代

【英文标题】：jQuery image map alternative

【发布时间】：2011-07-08 14:42:57

【问题描述】：

使用图像映射的替代方法是什么？我最近看到一个问题，有人说，“为什么人们还在使用图像地图？”我想知道一个好的 CSS 或 javascript 解决方案，自己看看它是否比图像映射更好用。

【问题讨论】：

这是与此相关的问题：***.com/questions/745110/…

我很好奇，为什么不使用图像映射？

因为它们似乎在 iphone 上不受支持

【参考方案1】：

CSS 是处理图像映射时要走的路。通过更改左上角的宽度高度值，您可以轻松地将具有所需宽度和高度的链接放置在图像的任何区域上。

查看http://jsfiddle.net/DBvAY/1/ 的工作示例

在示例中，将鼠标悬停在图像中的婴儿脸或红灯上。要更改锚点的位置，您需要做的就是修改#pos1 和#pos2 的top 和left 属性。边界框的宽度和高度也是如此。全部使用没有 JavaScript 的 CSS 完成。

【讨论】：

这一切都很好，但是您将如何为您的可点击区域创建其他形状而不是矩形？

移动图像的不可见锚并不是图像映射的可行替代方案，尤其是因为图像映射可能包含不规则形状。

当需要图像映射时，这不是一个真正可行的选择。使用 CMS，内容编辑器并不总是可以访问 x y 坐标或元素的高度和宽度。

更多形状在这里：css-tricks.com/working-with-shapes-in-web-design 在此处查找缩放位置：zaneray.com/responsive-image-map

这个答案链接到一个似乎不再起作用的jsfiddle。可能是因为图片不存在或者连接被服务器拒绝了。

【参考方案2】：

你只需要把ID放在anchors上，不需要div。

【参考方案3】：

如果您的网站是响应式的，您可能想尝试使用 SVG 作为图像地图的绝佳替代品。

SVG 可以很容易地做出响应，也可以响应悬停效果等。

This is a nice article 讨论此事。

【讨论】：

链接已损坏。你能帮我们找到这篇文章吗？

【参考方案4】：

作为侯赛因的回答。我只是添加我的评论并与您分享使用图像地图的发烧中的一些链接。

您不仅可以将图像定位为正方形，还可以将图像定位为矩形甚至多边形。 您可以通过悬停位置/在弹出屏幕中添加您想要的输出，甚至您也可以执行操作。

要获得更多信息，请访问以下链接帮助完整

link 1imagemapster

link 2imagemapster-solutions

您可以将其作为图像映射器进行谷歌搜索以获取更多信息。 谢谢

【参考方案5】：

这是扩展 Hussein 的答案并使其在响应式设计中扩展。您也可以使用变换制作different simple shapes from CSS。要找到大致位置 (%)，您可以从 this page 获得帮助。

这是一个例子：

html, div, p, a 
  font-family: arial;

.map-image 
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 0;

.map-image img 
  width: 100%;
  height: auto;
  display:block;

.map-image a 
  text-decoration: none;
  padding: 5px;
  color: #FFF;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  margin: 0;
  font-size: 4vw;

.map-image a:hover 
  border: 1px solid #FFF;
  margin: -1px;

.map-image a.rotate 
  border-radius: 50%;
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */
  transform: rotate(20deg);

.map-image a.rotate span 
  position:absolute;
  -ms-transform: rotate(-20deg); /* IE 9 */
  -webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
  transform: rotate(-20deg);
  top:25%;

.map-image a.skew 
   border-radius: 15%;
   -ms-transform: skewX(-20deg) rotate(9deg);
   -webkit-transform: skewX(-20deg) rotate(9deg);
   transform: skewX(-20deg) rotate(9deg);

.map-image a.skew span 
  position:absolute;
  -ms-transform: skewX(20deg) rotate(-9deg);
  -webkit-transform: skewX(20deg) rotate(-9deg);
  transform: skewX(20deg) rotate(-9deg);
  top:12%;
  left:4%;

.map-image svg 
  position:absolute;

.map-image polygon:hover 
  stroke: #FFF;

.map-image .poligon-title 
  position:absolute;
  left:19%;
  top:43%;
  color: #FFF;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  margin: 0;
  font-size: 2.6vw;
  z-index:100;

<div class="map-image">
  <img src="http://cdn.frooition.com/060129/images/100_1428.JPG">
  <a href="https://www.google.com" title="Front window" style="position: absolute; left: 24.4%; top: 16.3%; width: 33.3%; height: 25.39%; z-index: 99; background-color:rgba(255,0,0,0.3);" class="skew"><span>Google</span></a>
  <a href="https://www.facebook.com" title="Seats" style="position: absolute; left: 58%; top: 0.16%; width: 28.4%; height: 26.33%;  z-index: 96; background-color:rgba(0,255,255,0.2);">Facebook</a>
  <a href="https://www.linkedin.com/" title="Wheel" style="position: absolute; left: 43%; top: 57.4%; width: 20%; height: 39.34%; z-index: 99; background-color:rgba(0,255,0,0.2);" class="rotate"><span>Linkedin</span></a>
  <svg   style="position: absolute; left: 10%; top: 36%;  z-index: 99;" viewBox="0 0 450 600">
<a id="anchor" xlink:href="https://***.com" target="_top">
  <polygon points="190,5 385,60 210,320 0,300 200,134 205,120 205,104" style="fill:rgba(0,0,0, 0.4);stroke-width:1" />
  Sorry, your browser does not support inline SVG.
  </a>
</svg>
<div class="poligon-title">***</div>
</div>

（与 svg 多边形的混合有点实验性）