HTML img标签的width height ismap usemap title alt 属性

前言

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> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
（2）<area> 标签定义图像映射中的区域。【图像映射】指带有可点击区域的图像）。area 元素总是嵌套在 <map> 标签中。

后语

• 在线DEMO https://hgy9473.github.io/myl...

• 参考资料：w3school http://www.w3school.com.cn/tags/tag_img.asp