html<img><map><area>标签总结

前言

-<img> 标签并不会在网页中插入图像，而是从网页上链接图像。
-<img> 标签创建的是被引用图像的占位空间

用法示例：

<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="图片显示不出来，点击这个链接进入百度" title="鼠标滑过时提示进入百度"/>

<img> 必要属性

-<img>的属性中，src和alt是必须的属性

src的相对路径和绝对路径

-绝对url - 指向另一个站点（略）
-相对url - 指向站点内另一个文件夹

<img src="/i/ct_netscape.jpg">

定义图像的高度和宽度

<img src="" height=60px width=60px /><!--height和width的值可以是piexls或percent-->

请不要通过 height 和 width 属性来缩放图像，正确的做法是在网页上使用图像之前，通过软件把图像处理为合适的尺寸。

关于图像映射

ismap属性

把鼠标点击的坐标发送到服务器端，建立服务端图像映射（需要服务端支持）

usemap属性

建立客户端图像映射

具体用法引用w3school的一个例子

<img src="planets.gif" alt="Planets" usemap="#planetmap" /><map name="planetmap">  <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>  <area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>  <area href="venus.htm" shape="circle" coords="180,139,14">Venus</a></map>

这里需要关联：<map>和<area>标签

<map>标签

-<map>定义一个客户端图像映射，通常在<img>标签之后使用

具体用法引用w3school的一个例子

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap">  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /></map>

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），因为不一定引用哪一个，所以我们应同时向 <map> 添加 id 和 name 属性。

<area>元素

<area>永远嵌套在

<area>元素的属性

-alt属性是必须属性，定义替换文本
-shape属性，定义图形形状

shape的值：default 全部区域rect 矩形circle 圆形poly 多边形

-coords属性，定义图形坐标

coords的值：如果shape是rect，coords的值为x1,y1,x2,y2，规定左上角和右下角的坐标如果shape是circle，coords的值为x,y,radius，规定圆心的坐标和半径如果shape是poly，coords的值为x1,y1,x2,y2,xn,yn，规定多边形各边的坐标，如果最后一个坐标和第一个不一致，浏览器为了关闭图形，会添加最后坐标

-href属性，定义映射区域的地址
-target属性，定义在何处打开href属性指定目标
-nohref属性，定义该区域没有相关链接

<area shape="circle" coords="180,139,14" nohref="nohref" alt="venus"/>

这里有一个问题，如何确定coords坐标值？是否需要利用DW之类的工具实现？

<img>其他属性

longdesc属性

longdesc 在图片无法显示时，允许更长的描述性文字
（没有浏览器支持longdesc）