Heim > Artikel > Web-Frontend > 深入理解HTML图像_html/css_WEB-ITnose

深入理解HTML图像_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:32:341561Durchsuche

-> image 图像

【必须属性】

【1】src:地址

【2】alt:图像替代文本，供探索引擎抓取使用

【可选属性】

【1】height:图像高度

【2】width:图像宽度

【3】ismap:为图像定义为服务器端图像映射

【4】longdesc:与alt属性类似，提供多于1024字符的长文本描述

【5】usemap:为图像定义客户端图像映射 usemap = "#元素的name或id属性"

<img src="test.jpg" alt="测试图片"    style="max-width:90%"  style="max-width:90%">

映射地图

[注意] 深入理解HTML图像_html/css_WEB-ITnose 中的usemap属性可引用中的id或name属性(取决于浏览器),所以应同时向添加id和name属性。

图像热区

　　总是嵌套在标签中

【必须属性】

【1】alt:替代文本

【可选属性】

【1】coords:定义可点击区域的坐标

【2】href:定义此区域的目标URL

【3】nohref:排除某个区域

【4】shape:定义区域的形状

　　　　【a】圆形(circ/circle) coords= "x,y,r" x,y是圆心坐标；r是半径

　　　　【b】多边形(poly/polygon) coords = "x1,y1,x2,y2,x3,y3……" x,y是多边形每个顶点的坐标

　　　　【c】矩形(rect/rectangle) coords = "x1,y1,x2,y2" x1,y1是左上角坐标；x2,y2是右下角坐标

【d】全部区域default(默认)

[注意]标签采用"先来先得"的顺序，如果区域有重叠，以先出现的为准

<img src="jihe.jpg" alt="几何图形"    style="max-width:90%"  style="max-width:90%" usemap="#map"><map name="map" id="map">  <area shape="rect" coords="35,38,150,158" href="line4.html" alt="四边形">  <area shape="poly" coords="175,109,193,44,268,41,296,109,233,151" href="line6.html" alt="六边形">  <area shape="poly" coords="315,81,330,58,356,40,387,37,411,52,430,79,433,108,418,132,389,153,357,154,333,137,315,108" href="line12.html" alt="12边形">  <area shape="circle" coords="512,95,60" href="line0.html" alt="圆形"></map>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：[css]我要用css画幅画(六)_html/css_WEB-ITnoseNächster Artikel：CSS应用二_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen

深入理解HTML图像_html/css_WEB-ITnose

目录

-> image 图像

映射地图

图像热区

In Verbindung stehende Artikel