menu linbiwei
account_circle

正在努力加载中QAQ

隐藏html中点击map时的显示area边框及图片热区链接坐标位置在手机端关于 map area中的自适应
date_range 2019-07-03 18:47
apps jquery,html
local_offer 查看标签
comment 0 条评论
浏览:431

解决边框

在area中加入onfocus="blur(this);"的属性
如果有多个area的时候可以使用:
<style type="text/css">
area {
    anything:expression(this.onfocus=this.blur);
}
</style>

解决手机端热区链接坐标自适应

引入jquery.rwdImageMaps.min.js文件代码如下
/*
* 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(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").on('load',function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);
接着调用
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
即可
名称不能为空
email
邮箱不能为空,请填写正确格式
link
网址请用http://或https://开头
message
评论不能为空
支持Markdown和LaTex数学公式
sentiment_very_satisfied

captcha
请输入验证码

keyboard_arrow_up