DW下载激活和如何使用DW确定map图片的coords坐标

DW的下载地址如下:http://dl.pconline.com.cn/download/90616.html 点击打开链接



如截图所示,选择本地下载中的一种方法下载,大小在60.2M左右。

安装DW软件,激活码为:wpd800-56030-83832-97910


打开DW软件,选择文件——新建——基本页——HTML



创建后点击新文件的 设计界面,在左上角选择插入——图像,当弹出的提示信息跳过忽略即可。


然后选择 绘制多边形的热点 ,鼠标变成heigh深黑色十字符号,然后按照你想要的多边形图案去确定多个点的形状,绘制之后的图案如下图,



然后切换文件的代码 界面视图就能得到类似:

<map name="Map" id="Map">
<area shape="poly" coords="28,132,60,153,70,169,78,192,86,204,103,209,120,173,104,153,90,142,106,128,96,120,79,115,53,117" href="#" />
</map>

这样的图片位置点位。

这样得到的点位坐标就是图片能点击的范围了。

要实现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(',')); } ``` 以上代码会根据图片实际大小和容器大小计算出缩放比例,然后遍历所有热区坐标,将坐标乘以缩放比例调整大小。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值