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

前言

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

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

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

3. img 元素的ismap属性

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

  <a href="../images/拼图.jpg">

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

  </a>

4. img 元素的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>

在以上代码中:

后语

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

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