MyException - 我的异常网
当前位置:我的异常网» Web前端 » 图片热点area,地图的用法(H5)

图片热点area,地图的用法(H5)

www.MyException.Cn  网友分享于:2013-01-02  浏览:0次
图片热点area,map的用法(H5)

最近在工作中遇到html标签<map>的使用,记录下(图像地图 / 图像热点 )<map>的使用过程:

 

标准定义:

定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

通俗理解:

<map>是在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!

 

兼容:所有主流浏览器都支持 <map> 标签与<area>标签

 

场景:

①比如一张图片的静态页!如果你不会切图做静态页,那么就可以用一张效果图来实现!

②<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面

③在一些购物网站,我们总能看到一张大图,上面铺满充满诱惑的礼品,当我们轻轻地用鼠标单击一下,就跳转到这个宝贝的页面。以后再也不用去找美工切图,并且也不用为兼容这种浏览器而发愁了。

 

一、area标签实现图片局部点击事件

原理:在图片上设置链接的area标签,产生图片的局部点击事件效果~

参考例子:

 

<map name="planetmap" id="planetmap">
    <area
            shape="circle"
            coords="180,139,14"
            href ="http://www.w3school.com.cn/example/html/venus.html"
            target ="_blank"
            alt="Venus" />

    <area
            shape="circle"
            coords="129,161,10"
            href ="http://www.w3school.com.cn/example/html/mercur.html"
            target ="_blank"
            alt="Mercury" />

    <area
            shape="circle"
            coords="-200,200,310"
            href ="http://www.w3school.com.cn/example/html/sun.html"
            target ="_blank"
            alt="Sun" />

</map>
<p>
    <b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),
    所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
</p>

 

 

参数说明:

(1)shape:可点击区域形状

  ①rect:矩形

  ②circle:圆形

  ③poligon:多边形

(2)coords:可点击区域坐标

  ①当shape是矩形时,此值是4个坐标值,前两个为坐上坐标(x,y),后两个为右下坐标

  ②当shape是圆形时,此值是3个坐标值,前两个为圆形的坐标,最后一个为半径

  ③当shape是多边形时,coords="x1, y1,x2,y2 ......",各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。

(3)usemap:使用哪个map的区域点击事件

 

【注释】:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

【注释】:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性

【注释】:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

 

 

【实际应用】HTML 图像地图

(1)什么是图像地图?

       把一幅图像分成多个区域,每个区域指向不同的URL地址。例如,将一幅中国地图的图像按照省市划分为若干个区域,这些区域就被称为热点,单击热点区域,就可以连接到与相应的省市有关的页面,这就是图像地图。

(2)怎么制作?

       首先必须定义出图像上的各个热点区域的形状,位置坐标,及其指向的URL地址等信息,这个过程叫图像热点映射。图像热点映射需要使用<map name=mapname></map>标签对进行说明,其中的name属性为该图像热点映射指定了一个名称。

       图像热点映射中的各个区域用<area>标签说明,<area>标签的格式为:<area shape="形状" coords="坐标" href="URL">,href部分也可以用nohref替换,表示在该区域单击鼠标无效。<area>标签还可以有一个target属性,用来指明浏览器在哪个窗口或者帧中显示href属性所指向的网页资源。

       定义好了图像热点之后,接着就要在<img> 图像标签中增加一个名为usemap的属性设置,usemap属性指定该图像被用作图像地图,其设置值为所使用的图像热点映射名称,格式为:在<map>标签中的name属性设置值前多加一个"#"字符。例如,<img src="china.jpg" usemap="#mymap">

 

具体来说:

①将想要显示的图片,使用HTML标签将其显示在页面中,代码很简单,不做过多解释。但是这里有一个关键的并不常用的属性,那就是usemap,它指定了你要选择的地图,也就是使用哪种地图方式来展示里面的链接。示例代码如下:
<img src="planets.jpg" border="0" usemap="#imgMap" alt="Planets" />
 ②接下来,定义Map地图,并将Map分块,用以区分不同的内容区域。
     Map地图由<map>标签和<area>标签组成。<map>标签的定义非常简单,只需声明id和name即可,因为不同浏览器识别的标签不一样,所以id和name二者缺一不可。<area>标签因为不常用,下面的图表展示了各个属性所代表的的确切含义。

 

属性
描述
coords
坐标值
定义可点击区域(对鼠标敏感的区域)的坐标。
href
URL
定义此区域的目标 URL。
shape
default
rect
circ
poly
定义区域的形状。
target
_blank
_parent
_self
_top
规定在何处打开 href 属性指定的目标 URL。
 
到此为止,我们就可以轻松创建自己的图片地图了。然而,对于如何图片中某个元素的坐标对很多小伙伴来说,仍然是一个难题,因为普通的看图软件根本无法查看每个元素的坐标位置。
 
【确定coords坐标值方法】:
方法一:在Dreamweaver中在图片上添加热区自动生成坐标,这是最快的方法
方法二:把需要添加局部连接的图片放在Photoshop中打开标尺然后放大之后可以看到坐标像素
 
 
 
二、图片自适应浏览器宽度问题
由于页面就是一张图片,所以会出现屏幕宽度不同(浏览器宽度不同)造成的显示不全或横向滚动条问题,比如1920px宽的图显示在1366px宽的浏览器上,就会出现横向滚动条。
 
尝试了几种方案:【正确方法在后面文章http://570109268.iteye.com/admin/blogs/2406185做了总结
 
1、将效果图改成div的背景图,对背景图居中显示
<div style="background:url(/images/abc/1.jpg) top center no-repeat;">
 虽然达到了适应浏览器宽度的效果,但area标签不支持图片是背景图,所以点击事件失效!
 
2、将图片按浏览器当前宽度指定宽度大小
<script type="text/javascript">
   window.onload=function(){
      if (window.innerWidth){
         winWidth = window.innerWidth;
      }else if ((document.body) && (document.body.clientWidth)){
        winWidth = document.body.clientWidth;
       }
      if (document.documentElement && 
           document.documentElement.clientWidth){
            winWidth = document.documentElement.clientWidth; 
       } 
        $("#img1").css("width",winWidth);
    } 
</script>
 这种情况虽然也能达到效果,但area的坐标值位置都发生改变,点击区域不对了!

 

3、将图片外层div左侧距离固定,求浏览器宽度winWidth同2

var left = (winWidth-1920)/2;//假设图片宽度是1920
$("#div1").css("left",left);
$("#div1").css("position",absolute);

 将左侧多出部分切掉,同时,去掉右侧多出部分(隐藏横向滚动条)

html{
overflow-x:hidden;
  overflow-y:auto;
}

  此方法缺点,如果浏览器不是全屏显示,右侧部分的图片会被切掉,而且没有滚动条,这就是不会切图的程序员写静态页的偷懒方法。所以想省事还是要最好精通PS

 

.

文章评论

那些争议最大的编程观点
那些争议最大的编程观点
程序员必看的十大电影
程序员必看的十大电影
程序员应该关注的一些事儿
程序员应该关注的一些事儿
10个调试和排错的小建议
10个调试和排错的小建议
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
老程序员的下场
老程序员的下场
一个程序员的时间管理
一个程序员的时间管理
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
漫画:程序员的工作
漫画:程序员的工作
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
总结2014中国互联网十大段子
总结2014中国互联网十大段子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
为什么程序员都是夜猫子
为什么程序员都是夜猫子
编程语言是女人
编程语言是女人
Java程序员必看电影
Java程序员必看电影
程序员的鄙视链
程序员的鄙视链
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
鲜为人知的编程真相
鲜为人知的编程真相
中美印日四国程序员比较
中美印日四国程序员比较
程序员和编码员之间的区别
程序员和编码员之间的区别
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
我是如何打败拖延症的
我是如何打败拖延症的
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
代码女神横空出世
代码女神横空出世
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
如何成为一名黑客
如何成为一名黑客
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
 程序员的样子
程序员的样子
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
我的丈夫是个程序员
我的丈夫是个程序员
程序员都该阅读的书
程序员都该阅读的书
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有