html中如何添加提示信息

時間 2019-11-12 標籤 html 如何添加提示信息

提示：在標籤中添加title屬性html

1.文本中如何添加提示信息？ide

　　1.1直接在標籤中加title=「值」；spa

　　例如：<p title="愛笑，愛哭，愛生活">我是女生，漂亮的女生，我是女生，愛哭的女生</p>code

　　1.2當鼠標移到p標籤上時，顯示title裏面的內容。htm

2.圖片中如何添加提示信息？blog

2.1在整張圖片中添加提示信息圖片

　　直接在img標籤中添加title=「內容」；另外：alt屬性在圖片加載不出來時候顯示ci

　　例如：<img src="http://www.ld12.com/upimg358/allimg/20161213/x1jbf4jqu12444.gif" alt="tupian" title="tupian">it

　　當鼠標移到img標籤上時顯示title裏面的內容event

2.2在指定區域顯示提示信息

　　步驟：a.在img標籤中添加usemap="#內容"

　　　　　b.在img同級中添加map標籤，而且在map標籤裏面添加area標籤

　　　　　c.map標籤裏的id名和name名必須同img裏的usemap裏的內容一致

3.完整代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>usemap用法</title>
</head>
<body>
    <!-- 在文本中添加提示信息 -->
    <p title="愛笑，愛哭，愛生活">我是女生，漂亮的女生，我是女生，愛哭的女生</p>

    <!-- 在整張圖片中添加提示信息 -->
    <img src="http://www.ld12.com/upimg358/allimg/20161213/x1jbf4jqu12444.gif" alt="tupian" title="tupian">    
    
    <!-- 在圖片固定位置添加提示信息 -->
    <img src="http://www.ld12.com/upimg358/allimg/20161213/x1jbf4jqu12444.gif" alt="tupian" usemap="#tupian">
    <map name="tupian" id="tupian">
        <area shape="rect" coords="0,0,50,50" title="愛你" alt="圖片">
        <!-- <area shape="cicle" coords="200,200,50" href="" alt=""> -->
        <!-- <area shape="polygon" coords="10,10,20,20,30,30,40，40" href="" alt="" title="愛你"> -->
    </map>        
</body>
</html>

View Code

4.area中的shape和coords詳解

　　shape選擇的區域coords座標

　　shape的值：default默認的區域 rect矩形區域 cicle圓形區域 poly多邊形區域

　　4.1矩形：頂點座標爲（0,0）斜對角線座標（200,200）

　　　　寫法：<area shape="rect" coords="0,0,200,200" title="圖片" alt="圖片">

4.2 圓形：圓心座標（200,200）半徑50

　　　　寫法：<area shape="cicle" coords="200,200,50" href="" alt="">

　　4.3不規則圖形：由座標（10,10）（20,20）（30,30）（40,25）圍成的多邊形

　　　　寫法：<area shape="polygon" coords="10,10,20,20,30,30,40,25" href="" alt="">

　　　　注意：不規則圖形座標值是成對出現的，因此coords裏的值也是成對出現的，不然設置無效