欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

HTML 圖像

HTML圖像

img元素允許您將圖像嵌入到HTML文檔中。

它有局部屬性:src，alt，height，width，usemap，ismap。

HTML5中的border，longdesc，name，align，hspace和vspace屬性已過時(shí)。

要嵌入圖像，您需要使用src和alt屬性，如下所示。

<!DOCTYPE HTML>
<html>
<body>
  <img src="http://www.www.w3cschool.cn/style/download.png" 
       alt="Triathlon Image"width="200"height="67" />
</body>
</html>

src屬性指定圖像的URL。

如果無法顯示圖片，則alt屬性定義內(nèi)容。

width和height屬性設(shè)置圖像大小(以像素為單位)。


img元素的常見用途是結(jié)合a元素創(chuàng)建基于圖像的超鏈接。

以下代碼顯示了如何使用img和a元素。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <a >
       <img ismap src="http://www.www.w3cschool.cn/style/download.png"/>
    </a>
  </p>
</body>
</html>

如果將ismap屬性應(yīng)用于img元素，則可以創(chuàng)建服務(wù)器端圖像映射，這意味著您在圖像上單擊的位置將附加到URL。

例如，如果您從圖像的頂部點(diǎn)擊了4個(gè)像素，從左邊緣點(diǎn)擊了10個(gè)像素，瀏覽器將導(dǎo)航到以下內(nèi)容：

//www.w3cschool.cn/page.html?10,4

客戶端圖像映射

您可以創(chuàng)建客戶端圖像映射：單擊圖像中的不同區(qū)域會(huì)導(dǎo)致瀏覽器導(dǎo)航到不同的URL。

客戶端圖像映射的關(guān)鍵元素是map與局部屬性name。

如果使用id屬性，它必須具有與name屬性相同的值。

map元素可以有一個(gè)或多個(gè)area元素。

每個(gè)區(qū)域元素標(biāo)記圖像中可以點(diǎn)擊的區(qū)域。

area元素具有局部屬性:alt，href，target，rel，media，hreflang，type，shape，coords。

rel，media和hreflang屬性是HTML5中的新特性。nohref屬性現(xiàn)在已過時(shí)。

  • href - 點(diǎn)擊區(qū)域時(shí)瀏覽器應(yīng)加載的網(wǎng)址
  • alt - 替代內(nèi)容。請參閱img元素上的相應(yīng)屬性。
  • target - 應(yīng)顯示網(wǎng)址的瀏覽內(nèi)容。
  • rel - 描述當(dāng)前文檔和目標(biāo)文檔之間的關(guān)系。
  • media - 區(qū)域有效的介質(zhì)。
  • hreflang - 目標(biāo)文檔的語言。
  • type - 目標(biāo)文檔的MIME類型。

shape和coords屬性一起工作。coords屬性取決于shape屬性的值。

  • rect
    該值表示矩形區(qū)域。
    coords屬性必須由四個(gè)逗號分隔的整數(shù)組成，表示與以下內(nèi)容的距離：
    • 圖像左邊緣到矩形左邊
    • 圖像頂邊到矩形頂邊
    • 圖像左邊緣到矩形右邊
    • 圖像頂邊到矩形底邊
  • circle
    該值表示圓形區(qū)域。
    coords屬性必須由三個(gè)逗號分隔的整數(shù)組成，表示以下內(nèi)容：
    • 從圖像左邊緣到圓心的距離
    • 從圖像頂邊緣到圓心的距離
    • 圓的半徑
  • poly
    此值表示多邊形。
    coords屬性必須至少為六個(gè)逗號分隔的整數(shù)，每對表示多邊形上的一個(gè)點(diǎn)。
  • default
    此值是默認(rèn)區(qū)域，覆蓋整個(gè)圖像的其余部分。
    將此值用于shape屬性時(shí)，不需要坐標(biāo)值。

以下代碼顯示如何使用圖像映射。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <img src="http://www.www.w3cschool.cn/style/download.png" usemap="#mymap"/>
  </p>
  <map name="mymap">
    <area href="a.html" shape="rect" coords="3,5,68,62" alt="test a" />
    <area href="b.html" shape="rect" coords="70,5,130,62" alt="test b" />
    <area href="c.html" shape="default" alt="test c" />
  </map>
</body>
</html>

img元素上的usemap屬性將map元素與圖像相關(guān)聯(lián)。