HTML建立圖像映射，佈局，表單

時間 2019-11-17

標籤 html 建立圖像映射佈局表單欄目 HTML 简体版

原文原文鏈接

來源: 實驗樓html

建立圖像映射linux

在這以前咱們動手試驗過將圖片做爲連接來使用，觸發連接的方式就是點擊圖片的任何地方均可以連接到跳轉地址，有時咱們須要實現，點擊圖片的不一樣地方跳轉到不一樣的地方。意思就是，一張圖片咱們能夠建立帶有可供點擊區域的圖像地圖，其中每一個區域就是一個超連接。涉及到的標籤就是< map>標籤，用來指定圖片,< area>用來指定超連接區域ide

<img src="xx.jpg" usemap="#mp"/>  
<map name="mp" id="mp">  
    <area>
    ...
    ...
    ...
    </area>  
</map>

這裏以一張圖片做爲地圖，在< area>標籤中咱們會涉及到shape ，coords， href屬性，分別用來指定超連接區域形狀，超連接區域座標，還有超連接跳轉地。工具

這是具體實現內容oop

<html>
<head>
<title>image test</title>
</head>
<body background="./qwe.gif">

<p>tap the li zi </p>
<img src="./julizi.png" usemap="#lizi"/>

<map name="lizi">
<area shape="rect" coords="50,10,100,60" href="img.html" target="_blank">
</map>

</body>
</html>

而後，當咱們點擊小松鼠舉起的栗子，你就會看見更多栗子 spa

shape屬性的取值能夠是：rect(矩形)、circle(圓形)、poly(多邊形)和default(整個圖像區域)。這裏採用的是矩形。rest

coords屬性對於矩形而言，coords有4個值，分別用逗號隔開，表示矩形區域左上角x座標、左上角y座標、右下角x座標和右下角y座標，這裏獲取座標的方式，就用截圖工具幫忙就好。code

<html>
<head>
    <style>
        div#container{width:1000px}
        div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
        div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
        div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
        div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
    </style>
</head>
<body>
<div id="container">
    <div id="header">
        <h1>shiyanlou book store</h1>
    </div>
    <div id="sidebar">
       <dl>
           <dt>list of book</dt>
            <dd>
                <ol>
                    <li>hadoop</li>
                    <li>linux</li>
                    <li>c</li>
                </ol>
            </dd>
       </dl>
    </div>
    <div id="mainbody">
        <h1>the summary of the book</h1>
        <p>i will lead you to travel in the season of linux</p>

　　　　　　<form>
　　　　　　username：
　　　　　　<input type="text" name="username">
　　　　　　<br />
　　　　　　password：
　　　　　　<input type="password" name="password">
　　　　　　</form> orm

　　　　 <form>htm

<input type="radio" name="sex" value="male" /> Male

<br/> <input type="radio" name="sex" value="female" /> Female </form> <form> <input type="checkbox" name="married" /> married <br/> <input type="checkbox" name="have a job" /> have a job <br/> <input type="checkbox" name="chinese" /> chinese </form> </div> <div id="footer">good good study day day up</div> </div> </body> </html>