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>

form表单标签内有输入框input、单选、多选、select下拉列表菜单与跳转菜单、提交按钮等标签内容。

当你输入时你会发现，username是可见的，password是被点替换了的，这就是这两个类型的区别。

增添两种选框，一种是多选，一种是单选。(具体看代码）

1. html：图像连接和图像映射
2. html 图像布局
3. 图像映射、
4. HTML图片映射
5. html表格、表单元素、img标签、图像映射技术、html4引入flash
6. elasticsearch7 建立映射
7. CSS-图像映射
8. HTML|制作表单、布局
9. Hibernate单表映射
10. 03_Hibernate------单表映射
更多相关文章...
• Scala Map(映射) - Scala教程
• ASP.NET Web Pages - HTML 表单 - ASP.NET 教程
• 适用于PHP初学者的学习线路和建议
• JDK13 GA发布：5大特性解读