the5fire

关注Python、Django、Vim、Linux、Web开发、团队管理和互联网--Life is short, we need Python.


html中使用map标签,coords值怎么精确定位gif上的链接

作者:the5fire | 标签:       | 发布:2011-03-24 6:36 p.m. | 阅读量: 14257, 14064
  上学校的网站上查了点东西,一不留神发现一个我不知道的东东(我out了?)
map2
  这个图片中的东西都是可以点的,在图片中加超链接显然是不可能的,那他是怎么做到的呢?
  我的思路是通过添加一个背景图片,然后通过div定位或者表格定位到那个框框里,能否实现我也不知。
带着好奇用火狐查看一下,原来“其中有奥秘”,看这里:
map3
  看看这堆复杂的代码,估计就是这个了。Map标签,从来没有用过这个东西,随手一查,原来如此。号称:热点超链接就是它了。
  摘其中的一段代码:

  分析一下不难发现,href就是链接地址,coords暂时不知,target这个不用说了吧。Shape就是形状。分析coords中的数据以及RECT(矩形)这个关键字,不难得出299,310,332,372就是坐标了。在img标签上加上 usemap="#map" ,就有这个效果了。截个图当做结尾:

map4
另外在多说一句;好奇是获得知识的最佳方式。 - from the5fire.com
----EOF-----

微信公众号:Python程序员杂谈


其他分类: