html中map area 热区自适应的原生js实现方案

时间: 2018-05-22阅读: 4987标签: 自适应

在做自适应网页的时候,如果在图片中使用了热区map。图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应。这篇文章就介绍通过原生js来实现:MAP中每个area的坐标也随页面等比例的变化效果。


map area 热区自适应的实现代码

html:

<style>
img{
	display:block;max-width:1920;width: 100%;border: 0;
}	
</style>
<img src="src/1.jpg" usemap="#planetmap"/>
<map name="planetmap" id="planetmap">
	<area shape="rect" coords="0,0,110,200" href="#"/>
	<area shape="rect" coords="50,50,200,200" href="#"/>
</map>


js:

<script>
var initwidth=null,//初始图片宽度
	area=document.getElementsByTagName('area'),
	initarea=null;//初始数据保存
	
function init(){//初始化
	initwidth=1920;
	initarea=new Array(area.length-1);
	for(var i=0;i<area.length;i++){
		initarea[i]=area[i].getAttribute("coords");
	}
}

function setCoords(){//根据分辨率自适应热区坐标
    var width=document.body.offsetWidth,
    	percent=width/initwidth;
    for(var i=0;i<area.length;i++){
    	var coords=initarea[i],
    		arr=coords.split(",");
        for(var j=0;j<arr.length;j++){
            arr[j] *= percent;    
        }
        area[i].setAttribute("coords",arr.join(","));
    }
} 
//使用
init();
window.onresize = function () {  
    setCoords();
}  
</script>


大家在实际开发,请参照代码根据直接的需求改进。如果html页面中存在多个图片需要area,请自行封装实现!


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/801

vuejs中拖动改变元素宽度实现宽度自适应大小

拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时

CSS实现自适应分隔线的N种方法

伪元素+transform:translateX(-100%);主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。

将一堆图片自适应页面排列

最近在开发一个批量展示图片的页面,图片的自适应排列是一个无法避免的问题,在付出了许多头发的代价之后,终于完成了图片排列,并封装成组件,最终效果如下

textarea高度自适应的两种方案

textarea元素存在selectionEnd和selectionStart的属性用来表示选中的文本开始位置和结束位置,DOM接口实例是 HTMLTextAreaElement, 它具有 setSelectionRange 方法,用来选中输入框中的文本

web页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数;vw 是相对长度单位,相对于浏览器窗口的宽度,浏览器窗口宽度被均分为100个单位的vw,rem 和 vw 结合实现WEB页面等比例缩放自适应

CSS自适应正方形问题

移动端项目中经常遇到自适应的问题,下面我们来看看关于自适应的方法:在盒模型中,margin、padding的百分比数值是相对于父元素的宽度计算的,所以将padding值设为与width值相同的百分比即可。

CSS实现自适应正方形、等宽高比矩形

利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度;利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult

打造自适应网站只用一个 CSS 属性就够了

用一个CSS属性创建一个响应式网站,让我们来看看它是如何做到的。以这个模板为例,没有应用css属性。

让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和&nbsp;等HTML元素来添加换行和打印空格。textarea也能跟prev一样保留内容格式,但是元素高度是固定的

iframe 自适应高度的多种实现方式

实现 iframe 的自适应高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!