the5fire的技术博客

关注python、vim、linux、web开发和互联网--life is short, we need python.


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

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

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

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

扫码关注,或者搜索微信公众号:码农悟凡


其他分类: