码迷,mamicode.com
首页 > 其他好文 > 详细

img中的 ismap 属性

时间:2015-01-12 17:10:56      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

<a href="test.aspx"> <img src="test1.gif" ismap="ismap" /> </a>

  将以上内容拷贝到测试html页中,其中a的href属性指向你要处理ismap所传递的参数的页面,如果是个人测试,href最好写当前网页的地址。(注:务必给<img />标签追加一个父级的<a>标签,否则你将无法查看传递的坐标)

  ismap被称作“服务器端图像映射”,简单来说,它可以给你传递当前图片的x、y坐标(鼠标点击处的坐标,相对于图像的左上角而言)。

  如果想偷点懒,点此链接:http://www.w3school.com.cn/tags/att_img_ismap.asp在网页中找到“亲自试一试”或者“TIY”,单击会打开一个新页面,这是W3School提供的测试页面,单击右侧图片的随便一个位置,然后,你会发现,它返回了你所点击位置的坐标(图像左上角坐标为0,0)。

  这种方式并不直观,如果想知晓ismap传递来的属性以及名称是什么,需要自己写代码测试。测试过程中观察地址栏即可,你会看到类似的地址:test.aspx?135,109

  135,也就是第一个数字是X坐标,109,是Y坐标。OK,搞定,这就是ismap传来的坐标参数。

  简单说一下获取参数的方式:获取当前URL地址,C#可使用Request.RawUrl,其他语言自行度娘,LastIndexOf那个“?”,最后,截取字符串,得到“135,109”,再转换成数组输出。当然,你也可以直接用javascript获取当前URL,然后用同样方法处理坐标参数。

  关于这个属性的实用性,不作解释,笔者只是出于兴趣。如果我们想在图片中人为制造一个热点,比如一幅图片中有一个茶杯,我们想给茶杯设置一个可单击的热点链接,链接到百度来搜索,那么可以使用img标签的另一个属性:usemap。usemap必须有<map>嵌套的<area>标签配套使用,才能发挥作用。而关于<map>标签的使用,可参考W3School,这里就不赘述了。

img中的 ismap 属性

标签:

原文地址:http://www.cnblogs.com/zetakoala/p/4218631.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!