注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Mr.7

我将骄傲的活在这个大唐盛世

 
 
 

日志

 
 

如何实现图片的热点区域在不同缩放大小下都有用  

2014-10-19 17:45:19|  分类: 挨踢咋活 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

有些以为很简单的东西,居然就没有找到现成的解决方案。譬如:现在突然用到一个图片中的热点区域连接(在img中,通过map和area标签来实现图片热点链接),发现在响应式设计下,不同的屏幕大小,那个热点区域就是不管用。原理很简单,在不同大小下根据缩放比例通过js改坐标位置即可。可是这辈子听过了那么多大道理,还是过不了这一生;需要应急的还是如何趟过这个需求,只有实现之!

例子可以参见:http://pan.baidu.com/s/1sjHgkjj

具体的说明其实是一段代码:


//设置图片热点区域
function setmapareaurl(img_id,new_w,new_h,old_w,old_h)
{
function get_x(oldx)
{
return new_w * (parseInt(oldx)/old_w);
}
function get_y(oldy)
{
return new_h * (parseInt(oldy)/old_h);
}

function setarea(area)
{
var olds = $(area).attr("old_coords").split(",");

var news = [];
for(var i=0;i<olds.length;i++)
{
news.push(i%2==0?get_x(olds[i]):get_y(olds[i]));
}

$(area).attr("coords", news.join());
}

var areas = $("#"+img_id+">area");
areas.each(function()
{
setarea(this);
});
}

function setimg(map_id,img_id)
{
var oImg = $("#"+img_id);
var new_w = oImg.width();
var new_h = oImg.height();
var old_w = parseInt(oImg.attr("old_width") );
var old_h = parseInt(oImg.attr("old_height"));
setmapareaurl(map_id, new_w,new_h,old_w,old_h);
}

用代码之前,先这样设置下:

<img src="http://iammr.7.blog.163.com/blog/china.jpg" name="idImg" class="img_size" usemap="#idMap" id="idImg" old_width="1305" old_height="1118" />
<map name="idMap" id="idMap">
<area shape="poly" title="湖北省" old_coords="931,696,......939,703" href="http://www.126.com" target="_blank">
<area shape="poly" title="北京市" old_coords="885,420,......886,406" href="http://www.163.com" target="_blank">
</map>

也就是说,把制作热点区域链接时的坐标area.old_coords和当时对应的图片高宽(img.old_width,img.old_height)记下来。

然后在图片可能大小改变的情况下,重新设置新的坐标区域即可。

$(document).ready(function()
{
setimg("idMap", "idImg");

window.onresize=function()
{
setimg("idMap", "idImg");
}
}

其它说明:

  1. 最好的制作热点链接的工具是dreamwaver
  2. 做完demo,又一个问题来了:如何实现热点区域聚焦时的高亮显示

  评论这张
 
阅读(327)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018