html area 图片自适应,html5在手机端关于 map area中的自适应

[CLK Framework] CLK.Settings - 跨平台的参数存取模块

[CLK Framework] CLK.Settings - 跨平台的参数存取模块 问题情景 开发功能模块的时候,常常免不了有一些参数(例如ConnectionString),需要存放在Config檔 ...

Android 手机设置CMWAP 接入点

Android 手机设置CMWAP 接入点 设置--- 无限控件---移动网络设置---接入点名称----再按菜单---选择新apn 第一步,设置CMNET 上网APN 新建 APN 1.名称:cmn ...

PHP读书笔记(3)-常量

什么是常量 什么是常量?常量可以理解为值不变的量 :或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.手册上是这么定义PHP的常量:常量是一个简单值的标识符(名字).如同其名称所暗示的,在脚本 ...

C++ 数组作为函数参数时,传递数组大小的方法

废话不多说,先上错误示范: void fun(int arr[arr_num]) { // ... } int main() { // ... int *arr = new int[10]; fun( ...

BZOJ 1800 fly-飞行棋

这道题其实考察的就是从其中能找到几条直径,因为这次数据范围比较小,所以只需设一个二维数组,记录一下每个点及每个点从零开始的位置,最后定一个变量记录周长,最后用个循环搜一下位置小于周长一半 ...

AngularJS数据建模(转载)

出处不明 我们知道,AngularJS并没有自带立等可用的数据建模方案.而是以相当抽象的方式,让我们在controller中使用JSON数据作为模 型.但是随着时间的推移和项目的成长,我意识到这种建模 ...

PHP文件基本操作及文件的上传和下载

此篇实现了PHP对文件的系列操作,包括文件的读写和处理.文件的上传.文件的下载. 1.简单写文件:file_put_contents("文件名","数据字符串" ...

jquery中页面Ajax方法$.load的功能

load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequ ...

二、Django用户认证之cookie和session

1.cookie原理 Cookie意为“甜饼”,是由W3C组织提出,最早由Netscape社区发展的一种机制.目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox.O ...

js 一些基础知识

数据类型: 作用域 每个函数都有自己的执行环境,执行环境定义了变量有权访问的其他数据,决定了他们各自的行为. 每个执行环境都有一个与之关联的变量对象(variable object),环境中定义的所有 ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现HTML热区map坐标随图片大小自适应,可以通过以下步骤: 1. 在HTML,为图片设置一个容器div,并将图片作为div的背景图。设置该div的宽度和高度,以及background-size为contain或cover,使图片大小自适应容器。 2. 使用JavaScript获取图片的实际宽度和高度,计算出图片缩放比例。 3. 遍历所有热区的坐标,将坐标乘以缩放比例,以适应图片缩放后的大小。 以下是示例代码: HTML部分: ```html <div id="image-container"> <img src="image.jpg" alt="" id="image" /> <map name="hotspots"> <area shape="rect" coords="10,10,50,50" href="#" /> <area shape="rect" coords="60,60,100,100" href="#" /> </map> </div> ``` JavaScript部分: ```javascript const container = document.getElementById('image-container'); const image = document.getElementById('image'); const map = document.getElementsByName('hotspots')[0]; // 获取图片实际尺寸 const imgWidth = image.naturalWidth; const imgHeight = image.naturalHeight; // 计算缩放比例 const scaleX = container.offsetWidth / imgWidth; const scaleY = container.offsetHeight / imgHeight; const scale = Math.min(scaleX, scaleY); // 遍历所有热区坐标,乘以缩放比例 const coords = map.getElementsByTagName('area'); for (let i = 0; i < coords.length; i++) { const coord = coords[i].getAttribute('coords').split(','); for (let j = 0; j < coord.length; j++) { coord[j] = Math.round(coord[j] * scale); } coords[i].setAttribute('coords', coord.join(',')); } ``` 以上代码会根据图片实际大小和容器大小计算出缩放比例,然后遍历所有热区坐标,将坐标乘以缩放比例调整大小。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值