影像對映——我的web前端自學之路進行時2

習慣著也就淡了發表於2019-02-16

一段感悟

在說影像對映之前先說一段最近動態。最近稍稍的深入學了一段時間的htnl與css,應該算是在打基礎,其實在打基礎之前我已經學習了一段時間js,jquery,backbone,angularJs,當時也知道要打好基礎在去學習其他內容,但是卻並沒有真的認真去執行。直到後來學習的時候感覺自己太浮躁了,有點急於求成的感覺,那個時候終於靜下心來決定慢慢來,一步一步的走了。還是那幾個字:不急不躁,不快不慢。低頭做事,抬頭做人。空杯心態,繼續加油。好了,進入正題。


正題

影像對映指的是分割一塊影像使得分割的每一部分都能單獨有一個連結地址。
例子如下:

<!DOCTYPE html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<title>影像對映</title>

</head>
<body>
<img src=”../素材/imgs/電腦手機.jpg” alt=”電腦手機” usemap=”#photo”>
<map name=”photo”>

<area shape="rect" coords="0,400,200,800" alt="手機" href="http://www.phone.com">
<area shape="circle" coords="400,400,200" alt="電腦" href="http://www.computer.com">

</map>
</body>
</html>

程式碼解釋:先用img引入一張圖片,然後使用map標籤,map中設定的name屬性值就是img中的usemap屬性值。然後開始分割圖片,使用area分割,area中有幾個屬性,一個是shap(指定分割的形狀),一個是coords(指定座標,這個座標指的是以圖片右上角為原點的直角座標軸上的座標,不同的react會有不同的coords值,比如上述程式碼中的是rect和circle,(還有default,poly,讀者自己發掘)即矩形和圓形,其座標分別為矩形左上角的下x,y座標,右下角的下x,y座標。圓形的圓心座標,半徑大小);另外一個屬性值就是href,即相應分割快對應的連結,這裡需要注意的是如果area中的區域發生了重疊,會優先使用最先規定的座標。而且瀏覽器會忽略超過圖片界限的座標。


結束

有寫錯的地方希望各位多多指正,也請文明指正,轉載請說明出處。謝謝各位能抽時間看完。

相關文章