栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

动态调整图像映射和图像的大小

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

动态调整图像映射和图像的大小

如果最终使用Javascript完成任务,则可以使用以下跨浏览器代码段来调整

MAP
元素中所有区域的大小。

window.onload = function () {    var ImageMap = function (map) { var n,     areas = map.getElementsByTagName('area'),     len = areas.length,     coords = [],     previousWidth = 1920; for (n = 0; n < len; n++) {     coords[n] = areas[n].coords.split(','); } this.resize = function () {     var n, m, clen,         x = document.body.clientWidth / previousWidth;     for (n = 0; n < len; n++) {         clen = coords[n].length;         for (m = 0; m < clen; m++) {  coords[n][m] *= x;         }         areas[n].coords = coords[n].join(',');     }     previousWidth = document.body.clientWidth;     return true; }; window.onresize = this.resize;        },        imageMap = new ImageMap(document.getElementById('map_ID'));    imageMap.resize();}

previousWidth
必须等于原始图像的宽度。您还需要在HTML中使用一些相对单位:

<div ><img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="100%" alt="" />


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/440213.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号