Html Area 图像映射可点击区域 实现响应式图像映射

Html Area 图像映射可点击区域 实现响应式图像映射

主要实现了图片的分区域点击,可以自定义点击的区域,根据点击的位置不同,执行不同的方法或者跳转不同的网页

介绍
引用w3school的Demo

https://www.w3school.com.cn/tags/tag_area.asp#google_vignette

图片是必须的 宽高很重要 一定要设置指定的宽高
<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">

<map name="lifemap">
这里是图像的映射设置的部分

shape = poly  重点介绍这个多边形的点位类型
可以在根据图片的内容设置多个不规则点击映射区域,实现一个图片多个点击区域的效果

<area class="fourCick" alt="区域点击" shape="poly"  href="javascript:;"  coords="476,287,1151,246,1482,261,1479,336,810,508,486,401,476,287"/>

coords是x1,y1,x2,y2....Xn,Yn的点位集合
示例图片
点位获取

使用PS来获取要做的不规则图形的像素点位信息

切换图片属性到图片信息,把选项内容改为像素

根据要做映射的图片内容,获取这个内容的点位信息,使用英文逗号拼接,首位的两位点要一致,不一致的话系统会自动作闭合处理

或者使用在线网站

https://www.image-map.net/

在图片上设置好点位后,点击显示代码,会显示生成好的代码,可以直接使用

设置好了之后呢,点击这个人物,就可以激活指定的函数,或者是跳转指定的网站

页面缩放导致的点位偏移

因为点位是基于图片的宽高来设置的,屏幕的缩放会导致点位偏移,不能够精准的点击映射区域,这里使用脚本,自动计算页面的缩放,设置点位距离,可以让映射区域在页面缩放的情况下保持不变

脚本开源地址

https://github.com/stowball/jQuery-rwdImageMaps

示例网站

/*
* rwdImageMaps jQuery plugin v1.6
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2016 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function($) {
	$.fn.rwdImageMaps = function() {
		var $img = this;

		var rwdImageMap = function() {
			$img.each(function() {
				if (typeof($(this).attr('usemap')) == 'undefined')
					return;

				var that = this,
					$that = $(that);

				// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
				$('<img />').on('load', function() {
					var attrW = 'width',
						attrH = 'height',
						w = $that.attr(attrW),
						h = $that.attr(attrH);

					if (!w || !h) {
						var temp = new Image();
						temp.src = $that.attr('src');
						if (!w)
							w = temp.width;
						if (!h)
							h = temp.height;
					}

					var wPercent = $that.width()/100,
						hPercent = $that.height()/100,
						map = $that.attr('usemap').replace('#', ''),
						c = 'coords';

					$('map[name="' + map + '"]').find('area').each(function() {
						var $this = $(this);
						if (!$this.data(c))
							$this.data(c, $this.attr(c));

						var coords = $this.data(c).split(','),
							coordsPercent = new Array(coords.length);

						for (var i = 0; i < coordsPercent.length; ++i) {
							if (i % 2 === 0)
								coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
							else
								coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
						}
						$this.attr(c, coordsPercent.toString());
					});
				}).attr('src', $that.attr('src'));
			});
		};
		$(window).resize(rwdImageMap).trigger('resize');

		return this;
	};
})(jQuery);
脚本使用方法

引入页面

页面加载好之后,调用这个方法

<script>
$(document).ready(function() {
    $('img[usemap]').rwdImageMaps();
});
</script>

监听页面的缩放,可以在页面缩放的时候,改变点位位置,防止出现位置偏差

window.addEventListener('resize', getWindowInfo);
    function getWindowInfo() {
        $('img[usemap]').rwdImageMaps();
    };

作者网站地址:https://nanwish.love/

相关推荐
kigumi3 分钟前
Android Framework与JNI
android·java
小远yyds14 分钟前
Web导出Excel表格
前端·javascript·vue.js·excel
安_14 分钟前
记录一下跨域的问题,讲讲跨域
前端
国通快递驿站18 分钟前
AntFlow:一款高效灵活的开源工作流引擎
java·spring boot·后端·开源·钉钉
Tdm_88818 分钟前
C# 自动属性
java·开发语言·c#·asp.net
Nonullpoint.27 分钟前
对称加密与非对称加密:密码学的基石及 RSA 算法详解
java·计算机网络·算法·网络安全·密码学
问道飞鱼1 小时前
【Java知识】Java性能测试工具JMeter
java·测试工具·jmeter
友大冰1 小时前
【前端篇】Node.js 版本管理新选择:Volta,让版本切换更简单
前端·node.js
陈大爷(有低保)1 小时前
JQuery封装的ajax
java·后端
♡喜欢做梦1 小时前
【数据结构】栈和队列详解!!!--Java
java·开发语言·数据结构·链表