当前位置: 首页 > Web前端 > HTML

HTMLimg标签的widthheightismapusemaptitlealt属性

时间:2023-04-02 21:08:38 HTML

前言img元素在网页中嵌入图片今天特地测试了img的几个属性,在此做个记录。1、img元素的宽高属性。(1)当不设置width,height时,浏览器显示的图片与原图大小相等。(2)当只设置了width或者height时,图片会按比例缩放,确定没有设置的width或者height的值。(3)同时设置宽高时,图片会被缩放到正好等于设置的宽高,图片中的内容会完整显示,图片可能会变形(当是未按比例缩放)。2、img元素的title属性和alt属性(1)图片正常显示时,鼠标停留在图片上可以看到title的内容。(2)当图片不显示时,alt的内容会显示在应该显示图片的地方,鼠标停留在图片上可以看到title的内容。3、img元素的ismap属性(1)设置ismap属性后,当用户点击ismap图片时,浏览器会自动发送鼠标的x、y位置(相对于左上角)图片)到服务器。(2)仅当元素是具有有效href属性的元素的后代时,才允许使用ismap属性。(3)ismap属性将图像定义为[服务器端图像映射]。【图片图】是指带有可点击区域的图片。我的理解【服务器端映射】:获取坐标,交给服务器处理。因为在代码中设置链接地址为图片地址,所以点击中的图片后,会跳转到一张图片,同时地址栏中会显示鼠标点击的坐标的浏览器。如下图所示:4.img元素的usemap属性(1)使用usemap将鼠标点击图片时的坐标转换成具体的行为,包括加载和显示另一个文档。(2)利用img元素的usemap属性,在点击图片特定区域时跳转到特定地址。(3)usemap属性将图像定义为[客户端图像映射]。我对【客户端映射】的理解:获取坐标,在本地使用。例如:点击下图中的浏览器图片区域可以使用usemap跳转到相关界面。<区域形状="circle"coords="182,352,50"href="../images/chrome.png"alt="chrome"/>在上面代码中:(1)用于定义一个客户端图像映射,中的usemap属性可以引用中的id或name属性(视浏览器而定),所以我们也应该添加到添加id和name属性。(2)标签定义图像映射中的一个区域。[图像映射]指的是带有可点击区域的图像)。area元素总是嵌套在标签中。后记在线DEMOhttps://hgy9473.github.io/myl...参考:w3schoolhttp://www.w3school.com.cn/tags/tag_img.asp