img中的 ismap 属性

<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,这里就不赘述了。

时间: 2024-10-17 00:40:43

img中的 ismap 属性的相关文章

schema中的虚拟属性方法

schema中的虚拟属性方法相当于vue中的计算属性,它是通过已定义的schema属性的计算\组合\拼接得到的新的值 var personSchema = new Schema({ name: { first: String, last: String } }); var Person = mongoose.model('Person', personSchema); // create a document var bad = new Person({ name: { first: 'Walt

spring中使用parent属性来减少配置

在基于spring框架开发的项目中,如果有多个bean都是一个类的实力,如配置多个数据源时,大部分配置的属性都一样,只有少部分不一样,经常是copy上一个的定义,然后修改不一样的地方.其实spring bean定义也可以和对象一样进行继承. 示例如下:  <bean id="testBeanParent"  abstract="true"  class="com.wanzheng90.bean.TestBean">         &

css中的一些属性解析

1.inline-block 存在问题:inline-block的相互间距,元素之间会有一个左右2px的margin一样产生            请看中间的空隙. 为什么会产生这个空隙呢?? 怎么解决呢? 方案1:使子元素在html中无缝排列 <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <!---变成下面的----> <ul>

android中xmlns:tools属性详解

第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了text.因此为了在ide中预览效果,你必须在xml中为TextView控件设置android:text属性 <TextView android:id="@+id/text_main" android:layout_width="match_parent" and

javascript中常用坐标属性offset、scroll、client

原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. 1.在文档(document)对象里面用: scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度,相当于整个页面的总宽度的样子--网页正文全宽) scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(页面利用滚动条滚动到右边时,隐藏在

Core Data浅谈系列之十 : 关于数据模型中实体的属性

之前写了<Core Data浅谈系列汇总>,今天稍微回顾了下,做些补充. 在这个系列的第一篇<基础结构>中(2013年1月份的文章,时间过得好快啊!),有简单带过Entity的Attribute: 数据类型.布尔值统一用NSNumber来表示: 字符串类型用NSString表示: 时间类型用NSDate表示: 二进制数据类型用NSData表示: 非标准类型用Transformable来表示: 而Attribute还有其自身的Properties,比如Transient表示不用持久化

Hibernate中的inverse属性

Inverse属性 一.Inverse是hibernate双向关系中的基本概念.inverse的真正作用就是指定由哪一方来维护之间的关联关系.当一方中指定了“inverse=false”(默认),那么那一方就有责任负责之间的关联关系,说白了就是hibernate如何生成Sql来维护关联的记录! Hibernate仅仅按照主控方对象的状态的变化来同步更新数据库.按照原来的映射文件,people.getAddresses().add(address),即主控方对象的状态发生了改变,因此数据库会跟着对

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

HTML 5 中的标准属性

HTML 全局属性 HTML 属性赋予元素意义和语境. 下面的全局属性可用于任何 HTML 元素. (5)= HTML5 中添加的属性. 属性 描述 accesskey 规定激活元素的快捷键. class 规定元素的一个或多个类名(引用样式表中的类). contenteditable(5) 规定元素内容是否可编辑. contextmenu(5) 规定元素的上下文菜单.上下文菜单在用户点击元素时显示. data-*(5) 用于存储页面或应用程序的私有定制数据. dir 规定元素中内容的文本方向.