2. 程式人生 > >HTML中map及area標籤定位使用

HTML中map及area標籤定位使用

阿新 • • 發佈：2019-01-07

1.重點內容
圖片和熱點區域元素關聯是使用圖片的usemap屬性，其值對應的id或者name值（Chrome瀏覽器只支援name屬性值關聯）。
這裡出現了兩個HTML標籤，一個是還有一個是，這些都是從很早就支援的HTML標籤，所以不必擔心相容性問題。其中就閉合特性來看，類似，是無法有子元素或其他子內容的。

2.這裡出現了幾個屬性：

shape
shape表示點選熱點區域的形狀，支援矩形rect，圓形circle以及多邊形poly。
coords
coords表示點選熱點區域形狀的座標。座標點0,0表示圖片的左上角。
1.矩形rect支援4個數值，2個座標，分別是矩形左上角座標和矩形右下角座標。例如，coords=”20,20,80,80”生成的就是一個左上角座標20,20寬高都是60px的矩形區域。
2.圓形circle支援3個數值，前2個值為圓心座標，第3個值為圓的半徑大小。
3.多邊形poly就更簡單了，每兩個數值組合表示一個座標點，依次連線形成的區域就是最終的熱點區域。
href

href和<a>元素的href是一樣的東西，直接跳轉地址，或者錨點等。也同樣支援target屬性和rel屬性。也就是說<area>可以看成是半個<a>元素。

alt
alt同元素的alt，表示熱點區域圖片的描述資訊。
效果圖
這裡寫圖片描述
程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 

    <!--
    一、
    圖片和熱點區域元素關聯是使用圖片的usemap屬性，
    其值對應<map>的id或者name值（Chrome瀏覽器只支援name屬性值關聯）。
    二、去除點選邊框：
    1.map area{ outline: none; }
    2.area標籤中onfocus="blur(this)"   
    三、area標籤屬性
    shape
        shape表示點選熱點區域的形狀，支援矩形rect，圓形circle以及多邊形poly。
    coords
        coords表示點選熱點區域形狀的座標。座標點0,0表示圖片的左上角。
        1.矩形rect支援4個數值，2個座標，分別是矩形左上角座標和矩形右下角座標。例如，coords="20,20,80,80"生成的就是一個左上角座標20,20寬高都是60px的矩形區域。
        2.圓形circle支援3個數值，前2個值為圓心座標，第3個值為圓的半徑大小。
        3.多邊形poly就更簡單了，每兩個數值組合表示一個座標點，依次連線形成的區域就是最終的熱點區域。
    href
        href和<a>元素的href是一樣的東西，直接跳轉地址，或者錨點等。也同樣支援target屬性和rel屬性。也就是說<area>可以看成是半個<a>元素。
    alt
        alt同<img>元素的alt，表示熱點區域圖片的描述資訊。
     -->
 

    <img src="images/mm1.jpg" alt="美女" usemap="#MM">
    <map id="MM" name="MM">
        <area shape="rect"   coords="20,20,80,80" href="#rect" title="矩形" alt="矩形">
        <area shape="circle" coords="200,50,50" href="#circle" title="圓形" alt="圓形">
        <area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" title="多邊形" alt="多邊形">
    </map>
</body>
</html>

相關推薦

HTML中map及area標籤定位使用

1.重點內容 圖片和熱點區域元素關聯是使用圖片的usemap屬性，其值對應的id或者name值（Chrome瀏覽器只支援name屬性值關聯）。 這裡出現了兩個HTML標籤，一個是還有一個是，這些都是

html中設置錨點定位的幾種常見方法

element 針對 htm com script int nbsp onclick .get 1,使用id定位： <a href="#1F" name="1F">錨點1</a> <div name="1F"> <p>

HTML中浮動佈局float與定位佈局position的區分

浮動 float 取值 right/left:元素向右/左浮動。 注意 元素設定為浮動之後，就可以設定寬高(如下圖所示：li元素的寬高) 元素設定為浮動之後，會脫離文件流，在文件中不佔位。（即漂浮在文件流的上方,height為0） 元素浮動之後，後邊的正常

HTML中常用的部分標籤（一）

【常見的塊級標籤】 標題標籤<h1></h1>...<h6></h6> 水平線<hr/> 段落<p></p> 換行<br/> 引用<blockquote</b

HTML中一些常見的標籤的名稱

HTML中一些常見的標籤的名稱 <a>:anchor 定義錨 <b>:bold 定義粗體字 <body>:定義body元素 <br>:break 插入一個回車 <button>:定義按鈕 <caption>

html中td或th標籤的寬度設定

如果開發人員遇到HTML中設定td和th標籤無效的時候，其實可以使用Max-width 屬性設定寬，這個屬性親測有用！ 當然如果還是不行，這時你要檢查你的以下幾個方面是不是做到位了： 第一：整個頁面頭

HTML文字結構及常用標籤

一、什麼是HTML? HTML:超文字標籤語言 (Hyper Text Markup Language) www全球資訊網的描述性語言。 XHTML指可擴充套件超文字標記語言（標識語言）（EXtensible HyperText Markup Language）是一種置標語言

在html中使用語義化標籤的好處

語義化標籤，按照字面意思理解就是“具有特定意義的標籤”。好處：1、有意義的標籤使得頁面結構化，即使去掉css樣式頁面也能以一種清晰的結構展現。2、根據文件顯示結構更易於後期的維護。3、除了人容易理解外，程式和其他裝置也可以理解有意義的標籤。例如，搜尋引擎可以識別出標題行，（因

android 通過正則表示式遍歷html中所有的img標籤

String reg = "<img.*?>"; Pattern pattern = Pattern.compile(reg); Matcher matcher = pattern.matcher(sendString);//sendString為網

html中具有語義化標籤的元素

1.h1,h2 2.ul,ol和dl <dl> 標籤定義了定義列表（definition list）。 <dl> 標籤用於結合 <dt> （定義列表中的專案）和 <dd> （描述列表中的專案） <dl>

java中Map及Map.Entry詳解

Map是java中的介面，Map.Entry是Map的一個內部介面。 Map提供了一些常用方法，如keySet()、entrySet()等方法。 keySet()方法返回值是Map中key值的集合；e

HTML中作用及用法詳解

一、什麼是DTD       DTD（document type definition），文件型別定義。可定義合法的XML文件構建模組，它使用一系列合法的元素來定義文件的結構。通過DTD，每一個xml檔案均可攜帶一個有關其自身格式的描述。 內部的DOCTYPE宣告

HTML基本結構及基本標籤

什麼是HTML： HTML是Hyper Text Markup Language的縮寫，即超文字標記語言（所謂超文字可以理解為具有超能力的文字），是一種解釋性語言，用於製作網頁介面，使用該語言編寫的網頁最終被瀏覽器解釋執行 HTML基本結構： <h

html中bgsound背景音樂標籤在瀏覽器裡無法播放

1.原始碼： <body> <!-- 新增背景音樂,檔案地址為相對路徑，loop="-1"為無限迴圈--> <bgsound src="music.mp3

HTML中INPUT type="date"標籤如何賦值注意問題

現在的html5 input標籤支援type="date" 顯示有日期的日曆控制元件，一行簡單的程式碼就能顯示出一個日曆控制元件，但是有的時候需要給它一個預設的日期值，這個時候可能就要用到val()

html中 input 和 label 標籤如何將一組單選框互斥

在頁面實現中,需要羅列一組選項,例如一組水果,讓使用者只能選擇其中一個,進行提交,在html中,我們可以新增input中type="radio"屬性,實現單選框,文字內容則通過label標籤新增<inputtype="radio"name="fruit"id="oran

html中使用map標籤,coords值怎麼精確定位gif上的連結

  看看這堆複雜的程式碼，估計就是這個了。Map標籤，從來沒有用過這個東西，隨手一查，原來如此。號稱：熱點超連結就是它了。  摘其中的一段程式碼：  分析一下不難發現，href就是連結地址，coords暫時不知，target這個不用說了吧。Shape就是形狀。分析coord

HTML中的body及可以再body中出現的標籤

網頁的主體標記body  需要顯示的瀏覽器網頁模組的內容，都必須要定義在body中，<body> 標籤，可以說是HTML檔案中，最為重要的一塊內容。 主體標記 以<body>開始，以</body>結尾 注意：在構建HTML檔案時，請不要將

html中a標籤錨點定位雙擊跳轉路徑的問題

###錨點 在製作網頁時，我們常常遇到需要新增側邊導航，通過點選導航讓頁面自動滾動到指定位置，如：電商網站的樓層。這就涉及到<a>標籤的錨點應用，把它稱為“錨點標籤”。 通俗的講，我們想要讓頁面跳轉到的位置，就是錨點。錨點是一種超連結，只不過它是頁面內部的超連結，它指向頁

html中標籤用法解析及如何設定checkbox複選框的預設選中狀態

本文導語: html中<checkbox>標籤用法解析及如何設定checkbox複選框的預設選中狀態（由www.169it.com蒐集整理)html中複選框Checkbox物件代表一個 HTML 表單中的 一個選擇框。html中複選框Checkbox物件的屬性屬性 描述a...