个人中心
gpt4 book ai didi

javascript - 如何使图像 map 响应？

转载 作者：行者123 更新时间：2023-11-27 23:05:28 25 4
gpt4 key购买 nike

我正在尝试创建响应式图像映射。它在桌面模式下运行良好，但当我更改为移动模式时，超链接不再起作用。我检查了几个视频并从昨天开始在线阅读，但仍然找不到问题出在哪里。任何帮助将不胜感激提前。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Responsive Image Maps </title>
	<meta name="HandheldFriendly" content="True" />
	<meta name="MobileOptimized" content="320" />
	<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1" />
	<script src="../../js/ios-orientationchange-fix.min.js"></script>
	<style>
	body {
		font-family: Helvetica, Arial, sans-serif;
	}
	
	
	img {
		border: none;
		height: auto;
		max-width: 100%;
		width: auto;
	}
	</style>
</head>
<body>
<img  src="test.jpg" usemap="#image-map">
<map name="#image-map">
<area  alt="" title="" href="#" shape="rect" coords="915,1856,1012,1953" style="outline:none;" target="_self"     />
<area  alt="" title="" href="tel:513-442-7777" shape="rect" coords="1045,1859,1142,1956" style="outline:none;" target="_self"     />
<area  alt="" title="" href="mailto:test@test.CA" shape="rect" coords="1176,1856,1273,1953" style="outline:none;" target="_self"     />
</map>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
	
	$('area').on('click', function() {
		alert($(this).attr('alt') + ' clicked');
	});
});
</script>




</body>
</html>

最佳答案

这可以通过一个简单的 old-school responsive image 来完成和 float anchor 的大小和位置以百分比表示。尝试以几种不同的屏幕宽度加载以下代码段。您会看到带有红色边框的 float anchor 在所有屏幕宽度上悬停在 Jupiter 上方——图片随视口(viewport)增大和缩小，并且链接相应地调整其尺寸。 

#wrapper {
  width: 100%;
  max-width: 812px; /*actual width of image-- behaves strangely if exceeding this*/
  position: relative;
}

#wrapper img {
  max-width: 100%;
}

#anchor-jupiter {
  border: 1px solid red;
  height: 44%;
  width: 17%;
  position: absolute;
  left: 39.75%;
  top: 50%;
}
<div id="wrapper">
  <img src="/image/myS74.png" />
  <a id="anchor-jupiter" href="https://en.wikipedia.org/wiki/Jupiter" target="_blank"></a>
</div>

去掉边框，你就得到了一个很像图像映射的东西，但是完全可以用 CSS 配置并且能够响应:

#wrapper {
  width: 100%;
    max-width: 812px; /*actual width of image-- behaves strangely if exceeding this*/
  position: relative;
}

#wrapper img {
  max-width: 100%;
}

#anchor-jupiter {
  height: 44%;
  width: 17%;
  position: absolute;
  left: 39.75%;
  top: 50%;
}
<div id="wrapper">
  <img src="/image/myS74.png" />
  <a id="anchor-jupiter" href="https://en.wikipedia.org/wiki/Jupiter" target="_blank"></a>
</div>

现在，您使用这种方法从图像映射中丢失了一些东西——因为您使用的是通过 CSS 调整大小的 anchor ，所以您没有 full SVG-like shape support that you have with image maps .但是，CSS 对形状的支持有限。

另外，请注意有 newer formats for responsive images available -- 尽管您必须检查浏览器支持并提供回退。

关于javascript - 如何使图像 map 响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49724432/

25 4 0
文章推荐： javascript - woo_add_cart_fee 不起作用
文章推荐： javascript - 可能会破坏我 Javascript 职业生涯的基本 boolean 逻辑
文章推荐： javascript - 如何使用javascript根据递归对象中的一个键查找树级别
文章推荐： javascript - 如何从单独的表单中预填充数据电子邮件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com