前言

img 元素向网页中嵌入一幅图像

今天特地对 img 的几个属性做了一下测试,在这里做一个笔记。

1. img 元素的width属性和height属性。

(1)不设置 width 和 和 height 时,图片在浏览器中显示大小等于原图。
(2)只设置 width 或 height 时,图片会通过按比例缩放来决定没有设置的 width 或 height 的值。
(3)同时设置 width 和 height 时,图片会缩放到刚好等于设置的宽度和高度,图片中的内容会完整显示,图片可能变形(没有按比例缩放的时候)。

2. img 元素的title属性和alt属性

(1)图片正常显示的时候,鼠标停留在图片上可以看到 title 的内容。
(2)图片没有显示出来的时候,alt 的内容会显示在本来应该显示图片的位置,鼠标停留在图片上可以看到 title 的内容。

3. img 元素的ismap属性

(1)设置了 ismap 属性之后,当用户在 ismap 图像上单击时,浏览器会自动把鼠标的 x、y 位置(相对于图像的左上角)发送到服务器端。
(2)只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代元素时,才允许 ismap 属性。
(3)ismap 属性将图像定义为【服务器端图像映射】。【图像映射】指的是带有可点击区域的图像。

我理解的【服务端映射】:获取坐标,将坐标交给服务器处理。

  <a href="../images/拼图.jpg">
<img src='../images/拼图.jpg' ismap title='地球平面图' alt='地球平面图' />
</a>

因为在代码中将链接地址设置为图片地址,所以单击<img>中的图片之后将会跳转到一张图片,同时在浏览器地址栏会显示鼠标单击时的坐标。如下图:

4. img 元素的usemap属性

(1)使用 usemap 可以将把鼠标在图像上单击时的坐标转换成特定的行为,包括加载和显示另外一个文档。
(2)使用 img 元素的 usemap 属性可以实现单击图片上的特定区域时跳转到特定地址。
(3)usemap 属性将图像定义为【客户端图像映射】。

我理解的【客户端映射】:获取坐标,本地使用。

例如:可以使用 usemap 实现单击下图中的浏览器图片区域时跳转到相关界面。

  <img src="../images/拼图.jpg" usemap="#testmap" alt="地球平面图" title='地球平面图' />
<map name="testmap" id='testmap'>
<area shape="circle" coords="182,352,50" href ="../images/chrome.png" alt="chrome" />
<area shape="circle" coords="825,235,60" href ="http://www.oupeng.com/download/" alt="opera" />
<area shape="circle" coords="356,143,60" href ="http://www.firefox.com.cn/desktop/performance/" alt="firefox" />
<area shape="rect" coords="556,318,789,504" href ="https://www.supermapol.com/earth/" alt="earth" />
</map>

在以上代码中:

(1)<map>用于定义一个客户端图像映射,<img>中的usemap属性可引用 <map> 中的 idname 属性(取决于浏览器),所以我们应同时向 <map> 添加 idname 属性。
(2)<area> 标签定义图像映射中的区域。【图像映射】指带有可点击区域的图像)。area 元素总是嵌套在 <map> 标签中。

后语

HTML img标签的width height ismap usemap title alt 属性的更多相关文章

  1. as3:sprite作为容器使用时,最好不要指定width,height

    除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...

  2. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...

  3. 正则:img的url,width,height 和 a标签的url以及替换

    代码:// 内容:$detail['content'] //img的url,width,height $img = array(); $matches = array(); $regeImg = '/ ...

  4. 转:Canvas标签的width和height以及style.width和style.height的区别

    转自:http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html 作者:Artwl 背景 今天在博问中看到一个问题:用canvas 的 l ...

  5. Canvas的width,height 和 样式中Canvas的width,height

    控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...

  6. css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

    一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向 ...

  7. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  8. ffmpeg按比例缩放--"width / height not divisible by 2" 解决方法

    最近在处理视频的时候,有这么一个需求 如果视频的分辨率宽度大于960的话,就把宽度设为960,而高度按其比例进行缩放 如果视频的分辨率高度大于540的话,就把高度设为540,而宽度按其比例进行缩放 之 ...

  9. 如何理解VB窗体中的scale类属性及width height属性之间的关系

    如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...

随机推荐

  1. Matlab高级教程_第二篇:Matlab相见恨晚的模块_02_全局变量的妙用_遍历穿透

    1 比如我这边写了一个函数,这个函数中有一个变量作为参数,给定这个参数一个值,然后这个函数返回给我一个值.但是,我写这函数的时候,这个传参我不写到函数里面.可以通过全局变量的方式进行在外部穿透遍历. ...

  2. 【shell基础】条件测试

    例1 判断目录是否存在 #!/usr/bin/bash back_dir=/var/mysql_back if ! test -d $back_dir;then mkdir -p $back_dir ...

  3. hdu 2586 How far away ?(LCA模板)(倍增法)

    在dfs的过程中维护三个数组: deep[i],表示i点在树中的深度: grand[x][i],表示x的第2^i个祖先的节点编号: dis[x][i],表示x到它2^i祖 #include<io ...

  4. 关于Java中注解的总结

    注解用来给类声明附加额外信息,可以标注在类.字段.方法等上面,编译器.JVM以及开发人员等都可以通过反射拿到注解信息,进而做一些相关处理 Java中注解的知识结构图 常用注解 @Override   ...

  5. 单独安装jenkins-没有tomcat

    这里讲解war包的安装:windows的msi版安装很简单,双击即可,不用讲 1.官网下载 2. 3.把war包放到java目录下 4. 5.安装完成后打开:127.0.0.1:8080 输入密码后会 ...

  6. django框架进阶-auth认证系统-长期维护

    ##################    django的认证系统     ####################### 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要 ...

  7. python-django框架-电商项目-项目部署_20191127

    python-django框架-电商项目-项目部署: uwsgi作为web服务器: 在pycharm中启动项目:使用python manage.py runserver 这个runserver是dja ...

  8. java实现银行管理系统

    Bank类 package First; import java.util.TreeSet; //银行类public class Bank {        private String Bankna ...

  9. 浅尝HTML5之canvas

    转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...

  10. 快速搭建本地Nuget服务

    一  创建Nuget 服务项目 1.创建一个空白的asp.net web项目,需要.net 4.6以上 2.在Nuget中搜索 nuget.server ,可以看到是由 .Net 基金再维护的,几乎傻 ...