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

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.xdnf.cn/news/14189.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Python爬虫知识体系-----requests-----持续更新

数据科学、数据分析、人工智能必备知识汇总-----Python爬虫-----持续更新&#xff1a;https://blog.csdn.net/grd_java/article/details/140574349 文章目录 一、安装和基本使用二、get请求三、post请求四、代理 一、安装和基本使用 和解析库urllib几乎一摸一样&#xff0c;但是…

操作系统OS--进程

目录 操作系统是什么 进程 进程的状态 1.并行和并发 2.时间片 进程优先级 进程切换 task_struct内容分类&#xff1a; 操作系统是什么 操作系统本质上是一款纯正的“搞管理”的软件 你的程序不能直接写入硬件&#xff0c;都必须通过操作系统 对软硬件之间进行交互&…

C语言 strlen 函数 - C语言零基础入门教程

目录 一.strlen 函数简介二.strlen 函数实战三.猜你喜欢 零基础 C/C 学习路线推荐 : C/C 学习目录 >> C 语言基础入门 一.strlen 函数简介 在C 语言中&#xff0c;char 字符串也是一种非常重要的数据类型&#xff0c;我们可以使用 strlen 函数获取字符串长度&#xff1b;…

地面沉降数值模拟的最新进展与研究动态

地面沉降&#xff0c;由自然或人为因素引起的地表垂直位移现象&#xff0c;对城市规划、交通基础设施、建筑工程和环境地质学等多个领域产生深远影响。它不仅威胁着城市建筑安全和交通运行&#xff0c;还对环境和经济发展构成挑战。掌握地面沉降的理论知识和实践技能至关重要。…

如何选择适合的谷歌SEO服务避免踩坑?

在选择SEO服务时&#xff0c;很多企业担心花了钱却看不到效果。市面上确实有一些不靠谱的服务商&#xff0c;他们承诺短时间内实现排名飙升&#xff0c;但最终结果往往不尽如人意。那么&#xff0c;如何判断SEO服务的真假呢 首先&#xff0c;靠谱的SEO公司一定能提供真实的案例…

【OpenGL】OpenGL简介

文章目录 OpenGL概述OpenGL的本质OpenGL相关库核心库窗口管理glutfreeglutglfw 函数加载glewGLAD OpenGL概述 OpenGL(Open Graphics Library) 严格来说&#xff0c;本身并不是一个API&#xff0c;它是一个由Khronos组织制定并维护的规范(Specification)。OpenGL规范严格规定了…

算法闭关修炼百题计划(六)

塔塔开(滑稽 1.删除排序链表中的重复元素2.删除排序链表中的重复元素II3.字典序的第k小数字4.下一个排列5.排序链表6.随机链表的复制7.数据流的中位数 1.删除排序链表中的重复元素 使每个元素就出现一次 class Solution { public:ListNode* deleteDuplicates(ListNode* head)…

实习冲刺第二十天

543.二叉树的直径 给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的 长度 由它们之间边数表示。 示例 1&#xff1a; 输入&#xff1a;root …

搜索引擎算法解析提升搜索效率的关键要素

内容概要 搜索引擎算法是指一系列计算机程序和规则&#xff0c;用于决定如何抓取、索引和提供网页信息。了解这些算法的核心概念对于提高我们的搜索效率至关重要。本文将详细分析搜索引擎的工作原理和主要算法类型&#xff0c;以及它们如何影响搜索结果的准确性和用户体验。 …

Brave127编译指南 Windows篇:配置Git(四)

1. 概述 在Brave浏览器的开发过程中&#xff0c;Git作为核心版本控制工具扮演着不可或缺的角色。作为当今最广泛使用的分布式版本控制系统&#xff0c;Git为开发者提供了强大的源码管理能力。通过Git&#xff0c;您可以轻松追踪代码变更、管理不同版本&#xff0c;并与其他开发…

使用React和Vite构建一个AirBnb Experiences克隆网站

这一篇文章中&#xff0c;我会教你如何做一个AirBnb Experiences的克隆网站。主要涵盖React中Props的使用。 克隆网站最终呈现的效果&#xff1a; 1. 使用vite构建基础框架 npm create vitelatestcd airbnb-project npm install npm run dev2. 构建网站的3个部分 网站从上…

LC68----222. 完全二叉树的节点个数(java版)---树

1. 题目描述 完全二叉树的节点个数 给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点…

206面试题(71~80)

208道Java面试题 文章目录 **208道Java面试题** **71. 如何避免 SQL 注入&#xff1f;****72. 什么是 XSS 攻击&#xff0c;如何避免&#xff1f;****73. 什么是 CSRF 攻击&#xff0c;如何避免&#xff1f;****74. throw 和 throws 的区别&#xff1f;****75. final、finally、…

快速安装mysql5.7.44

参考文档&#xff1a; Windows系统上安装MySQL 5.7步骤&#xff08;实测可行&#xff09;_mysql5.7 windows-CSDN博客 MySQL 5.7压缩包安装图文教程(超详细)_Mysql_脚本之家 关键点&#xff1a; 参数文件内容参考&#xff1a; ALTER USER rootlocalhost IDENTIFIED WITH mys…

大数据新视界 -- 大数据大厂之 Impala 性能提升:高级执行计划优化实战案例(下)(18/30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

数字经济新时代,高校数字经济专业人才培养如何与产业对接?

一、数字经济发展及人才需求 &#xff08;一&#xff09;数字经济蓬勃发展 数字经济已成为驱动中国经济实现发展的新引擎&#xff0c;据中国信通院数据&#xff0c;2023年&#xff0c;我国数字经济规模达到53.9万亿元&#xff0c;数字经济占GDP比重达到42.8&#xff05;&#x…

【SpringBoot】21 @Async异步任务线程池的隔离

Git仓库 https://gitee.com/Lin_DH/system 介绍 线程池隔离&#xff1a;指一种通过为每个服务提供独立的线程池来隔离服务之间的资源和执行环境的做法。 为什么需要线程池隔离&#xff1f; 资源隔离&#xff0c;每个服务都有独立的线程池&#xff0c;可以避免由于某个服务的…

Python进行GRPC和Dubbo协议的高级测试

在微服务架构日益流行的今天&#xff0c;分布式系统的复杂性不断增加。GRPC 和 Dubbo 协议作为当今互联网行业中常见的高性能通信协议&#xff0c;已经成为服务之间交互的核心。然而&#xff0c;随着服务调用层次的不断增加&#xff0c;如何有效地测试这两种协议&#xff0c;确…

【启明智显分享】5G CPE为什么适合应用在连锁店中?

连锁门店需要5G CPE来满足其日益增长的网络需求&#xff0c;提升整体运营效率和竞争力。那么为什么5G CPE适合连锁店应用呢&#xff0c;小编为此做了整理&#xff0c;主要是基于以下几个方面的原因&#xff1a; 一、高效稳定的网络连接 1、高速数据传输&#xff1a; 5G CPE能…

私域运营流程框架

蝴蝶模型的作用主要体现在以下几点&#xff1a; 1. 提供清晰的运营思路&#xff1a;使运营人员能够全面、系统地规划和执行私域运营策略&#xff0c;避免盲目和混乱。 2. 实现精准营销&#xff1a;通过分层分类&#xff0c;能够针对不同用户群体制定个性化的营销策略&#xff0…