HTML圖片映射

時間 2019-11-17

標籤 html 圖片映射欄目 HTML 简体版

原文原文鏈接

<img>圖片映射html

<map>與<area>一塊兒使用來定義一個圖像映射(一個可點擊的連接區域).spa

<img src="cat.jpg" alt="聖誕貓" usemap="#catmap">
  <map name="catmap">
      <area shape="" coords="" href="" target="_blank" alt="">
      <area shape="" coords="" href="" target="_blank" alt="">
  </map>

<map>中name屬性：3d

name屬性給map一個名字用來查詢，這個屬性是必須的，值必須不能爲空而且不能帶空格。name屬性不許與同文檔中其餘map元素的值相同，若是id屬性也被添加，name屬性和id屬性的值必須相同。htm

<area>元素必須擁有一個<map>元素祖先元素，但不必定是直接的父元素。只容許有開始標籤不容許有結束標籤。 blog

<area>中座標從左上角(0,0)點起，向右x軸，向下y軸，（中心點獲取可用qq的截圖功能，從左上角開始截圖，長寬即爲中心點座標）圖片

shape屬性：「circle」、「rect」、「poly」，utf-8

<area shape="circle" coords="中心點，圓的半徑（204，511，50）" href="" alt="">ci

<area shape="rect" coords="矩形左上角點的座標，右下角點的座標（287,486,359,545）" href="" alt="">文檔

<area shape="poly" coords="分別列出多邊形每一個頂點的座標（x1,y1,x2,y2,x3,y3）" href="" alt="">get

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>圖片映射</title>
</head>
<body>
  <img src="cat.jpg" alt="聖誕貓" usemap="#catmap"> 
  <map name="catmap">
      <area shape="circle" coords="204,511,40" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541497764763&di=f515456a13384605e140751e455323d9&imgtype=0&src=http%3A%2F%2Fpic21.photophoto.cn%2F20111125%2F0017030594470929_b.jpg" target="_blank" alt="">
      <area shape="rect" coords="287,486,359,545" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541497911660&di=59b640621e3342303cfbbef44685075a&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3414111129%2C2073799617%26fm%3D214%26gp%3D0.jpg" target="_blank" alt="">
  </map> 
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。