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

news/2024/11/17 20:00:49/

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

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

介绍
引用w3school的Demohttps://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的点位集合
示例图片

image-1022.png

点位获取

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

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

image-q7tr.png

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

image-qdct.png

或者使用在线网站

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

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

image-xyn0.png

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

页面缩放导致的点位偏移

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

脚本开源地址

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);elsecoordsPercent[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);
脚本使用方法

引入页面

image-ihps.png

页面加载好之后,调用这个方法<script>
$(document).ready(function() {$('img[usemap]').rwdImageMaps();
});
</script>

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

image-4ync.png

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

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


http://www.ppmy.cn/news/1547794.html

相关文章

安装paddle

网址&#xff1a;飞桨PaddlePaddle-源于产业实践的开源深度学习平台 或者找对应python和cuda版本的paddle下载后安装&#xff1a; https://www.paddlepaddle.org.cn/whl/linux/mkl/avx/stable.html 你想要安装paddlepaddle - gpu2.6.1.post112版本。在你提供的文件列表中&am…

蚂蚁金服-OceanBase-测试开发工程师-面经

一面(15:00~16:20 110min) 面试(15:00~15:56) 一面是两个面试官面试&#xff0c;对数据库底层原理&#xff0c;毕业设计和项目流程进行了狠狠的拷打&#xff0c;最终进行了一道sql和一道算法的笔试&#xff0c;笔者觉得总体面试很偏底层&#xff0c;感觉答的很一般。 自我介…

⾃动化运维利器 Ansible-最佳实战

Ansible-最佳实战 一、ansible调试二、优化 Ansible 执行速度2.1 设置 SSH 为长连接2.1.1 设置 ansible 配置⽂件2.1.2 建⽴⻓连接并测试 2.2 开启 pipelining2.2.1 在 ansible.cfg 配置⽂件中设置 pipelining 为 True2.2.2 配置被控主机的 /etc/sudoers 文件 2.3 设置 facts 缓…

ODC 如何精确呈现SQL耗时 | OceanBase 开发者工具解析

前言 在程序员或DBA的日常工作中&#xff0c;编写并执行SQL语句如同日常饮食中的一餐一饭&#xff0c;再寻常不过。然而&#xff0c;在使用命令行或黑屏客户端处理SQL时&#xff0c;常会遇到编写难、错误排查缓慢以及查询结果可读性不佳等难题&#xff0c;因此&#xff0c;图形…

行业类别-智能制造-子类别工业4.0-细分类别物联网应用-应用场景智能工厂建设

1.大纲分析 针对您提出的题目“4.0 行业类别-智能制造-子类别工业4.0-细分类别物联网应用-应用场景智能工厂建设”&#xff0c;以下是一个详细的大纲分析&#xff0c;旨在深入探讨该应用场景下的各个方面&#xff1a; 一、引言 智能制造与工业4.0概述 智能制造的定义与发展趋…

【网络云计算】2024第46周周考-磁盘管理的基础知识-RAID篇

文章目录 1、画出各个RAID的结构图&#xff0c;6句话说明优点和缺点&#xff0c;以及磁盘可用率和坏盘数量&#xff0c;磁盘总的数量2、写出TCP五层模型以及对应的常用协议 【网络云计算】2024第46周周考-磁盘管理的基础知识-RAID篇 1、画出各个RAID的结构图&#xff0c;6句话说…

【STL】set,multiset,map,multimap的介绍以及使用

关联式容器 在C的STL中包含序列式容器和关联式容器 1.关联式容器&#xff1a;它里面存储的是元素本身&#xff0c;其底层是线性序列的数据结构&#xff0c;比如&#xff1a;vector&#xff0c;list&#xff0c;deque&#xff0c;forward_list(C11)等 2.关联式容器里面储存的…

JS 实现WebSocket通讯和什么是WebSocket

WebSocket 介绍&#xff1a; WebSocket 是一种网络传输协议&#xff0c;可在单个 TCP 连接上进行全双工通信。它允许服务器主动向客户端推送信息&#xff0c;客户端也能实时接收服务器的响应。 客户端 这里实现了将input内的内容发送给客户端&#xff0c;并将接收到的服务器的…