簡單聊聊錨點與map標簽的熱點錨點

本文聊的是錨點和熱點區(qū)域的錨點


想要更詳細的了解錨點可以學(xué)習(xí)

張鑫旭的技術(shù)之錨點傳送門

其實錨點還算簡單,是學(xué)習(xí)的少了才不知道熱點區(qū)域map這個標簽,所以特來總結(jié)與分享。

有什么用?

一篇長文想要快速通過目錄來進行閱讀之類的功能

介紹

百度百科-錨點:是網(wǎng)頁制作中超級鏈接的一種,又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內(nèi)的超級鏈接,運用相當普遍。

個人理解的錨點:快速定位,hash。由于在地址的后面價格#的大部分都是hash,如今的單頁路由的原理也和hash有關(guān)。


hash

錨點的使用a標簽的href是個關(guān)鍵
幾種使用方法:

a標簽href 跳轉(zhuǎn)對象為元素為id 也可以通過name來進行跳轉(zhuǎn)前提有name屬性
// 大家可以給元素加點css
<a href="#1F"></a>
<a href="#2F"></a>

<div id="1F">1F</div>
<a name="2F">2F</a>
在圖片上也想做錨點?用map
<body>
        
        ![](cat.jpg)
        <map name="Map">
          <area shape="poly" coords="245,18,254,97,255,143,263,161,258,182,256,217,250,239,242,257,240,281,237,296,272,297,302,300,325,299,338,296,354,297,375,298,394,298,408,298,419,298,421,291,416,282,413,264,409,250,402,232,395,215,387,196,386,183,381,170,372,160,371,150,378,138,378,123,376,96,377,81,379,70,382,53,384,33,380,22,374,16,360,24,354,37,350,47,341,55,326,59,309,61,295,61,279,49,274,36,262,31,257,23" href="#F1">
        </map>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <span id="F1">
        喵!
        </span>
    
    </body>
點擊貓進行跳轉(zhuǎn)

簡單介紹一下map的用法:
注意要告訴他用哪個map,area是告訴他在圖片上的區(qū)域

<img src="" usemap="#Map">
<map name="Map">
    <area>
</map>

area中有重要的幾個屬性:

  1. coords 這個是要選中的地區(qū)里面有圓、矩形、多邊形
  2. href 跳轉(zhuǎn)的地址、錨點
  3. 有需要可以看這個 菜鳥教程-area

tip:可以通過DW中有熱點選擇的功能,還算方便,省去了坐標的問題

就寫到這,我自己都覺得想應(yīng)付人,但是這個東西只是不知道,想了解幾分鐘就能上手了,謝謝大家!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容