图像相关（img）

Posted 2020-10-31 Autumn の Box

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图像相关（img）相关的知识，希望对你有一定的参考价值。

插入图像 <img src="url/图像文件名" alt="图像不能正常显示时的替代显示文本" />

图像附注 <img src="url/图像文件名" alt="显示文本" title="鼠标置于图像上时显示的提示文本" />

图像大小 <img src="url" width="#" height="#" />（以px为单位）

预加载图片 <img lowsrc="url/低解析度图形文件名" src="url/高解析度图形文件名" />

设置图像跨域 <img src="url" crossorigin="anonymous" /> （crossorigin可取值为：anonymous(匿名)、use-credentials(使用凭据)）

将图像定义为服务器端图像映射：

　　ismap 属性将图像定义为服务器端图像映射（图像映射指的是带有可点击区域的图像），当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）以？传参发送到服务器端，服务器端程序（如本例中的demo.php）可以根据这些坐标来做出响应，只有当 <img> 被包含于带有有效 href 属性的 <a> 里面时，才允许使用 ismap 属性；

将图像定义为客户端图像映射（点选图、影像地图）（需要CGI程式）（Dreamweaver 中可以用形状热点工具）：

　　<img src="url/图形文件名" usemap="#加上要使用的<map>的name或id" ismap="ismap" />

　　<map name="demo" id="demo">（描述地图）

　　</map>

　　usemap 属性将图像定义为客户端图像映射（图像映射指的是带有可点击区域的图像），usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img> 与 <map> 之间的关系，只有当 <img> 元素不属于 <a> 或 <button> 元素的子级时，才允许使用 usemap 属性；

　　上面的例子中将img映射为4个区域，当用户单击其中一个区域时，将被链接到不同的文档中，请注意，在<img>标签中已包含了对 ismap 图像映射的处理功能，这样那些使用不具有 usemap 处理功能的浏览器用户就可以通过服务器端机制来处理图像映射，usemap 客户端处理图像映射的好处是，它不要求有服务器或特殊的服务器软件，与 ismap 机制不同，它可以用在非 web （无网络）环境中，例如在本地的文件或者 CD-ROM 中使用；

　　地图就是很好地应用 ismap 和 usemap 属性的一个示例，例如，在浏览一家全国范围的大公司网页时，用户可能会在地图上单击他们所居住的城市，以获得附近地区零售店的地址和电话号码等；

　　<map> 标签用于客户端图像映射（图像映射指带有可点击区域的一幅图像），<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性；

　　<area> 元素永远嵌套在 <map> 元素内部，<area> 元素可定义图像映射中的区域；

　　　　　　shape：规定区域的形状

　　　　　　　　default --规定全部区域

　　　　　　　　rect --矩形区域

　　　　　　　　circle --圆形区域

　　　　　　　　poly --多边形区域

　　　　　　coords：规定区域的坐标，相对图像左上角的坐标 (0,0)，与 shape 属性配合使用，来规定区域的尺寸、形状和位置；

　　　　　　　　shape="rect"：必须使用四个数字，前两个数字为左上角坐标，后两个数字为右下角坐标

　　　　　　　　　　例：<area shape="rect" coords="100,50,200,75" href="url">

　　　　　　　　shape="circle"：必须使用三个数字，前两个数字为圆心的坐标，最后一个数字为半径长度