来源: 实验楼

创建图像映射

在这之前我们动手试验过将图片作为链接来使用，触发链接的方式就是点击图片的任何地方都可以链接到跳转地址，有时我们需要实现，点击图片的不同地方跳转到不同的地方。意思就是，一张图片我们可以创建带有可供点击区域的图像地图，其中每个区域就是一个超链接。涉及到的标签就是< map>标签，用来指定图片,< area>用来指定超链接区域

<img src="xx.jpg" usemap="#mp"/>

<map name="mp" id="mp">

    <area>

    ...

    ...

    ...

    </area>

</map>

　　

这里以一张图片作为地图， 在< area>标签中我们会涉及到shape ，coords， href属性，分别用来指定超链接区域形状，超链接区域坐标，还有超链接跳转地。

这是具体实现内容

<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>

然后，当我们点击小松鼠举起的栗子，你就会看见更多栗子

shape属性的取值可以是：rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。这里采用的是矩形。

coords属性对于矩形而言，coords有4个值，分别用逗号隔开，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标，这里获取坐标的方式，就用截图工具帮忙就好。

<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>

　　　　 <form>

         <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是被点替换了的，这就是这两个类型的区别。

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

HTML创建图像映射，布局，表单的更多相关文章

  1. HTML <img>标签 创建图像映射

    初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap"> <area s ...

  2. Java 创建、填充PDF表单域

    表单域,可以按用途分为多种不同的类型,常见的有文本框.多行文本框.密码框.隐藏域.复选框.单选框和下拉选择框等,目的是用于采集用户的输入或选择的数据.下面的示例中,将分享通过Java编程在PDF中添加 ...

  3. laravel使用创建的request作为表单验证类

    1.使用命令行工具创建request php artisan make request:validateLoginRequest 2.创建后进入app/Http/Requests目录下找到创建的文件 ...

  4. [K/3Cloud] 创建一个业务单据表单插件

    概念 创建一个业务单据插件,处理单据的相关控制逻辑. 示例 新建一个类,继承自单据插件基类Kingdee.BOS.Core.Bill.PlugIn.AbstractBillPlugIn. using ...

  5. Zend_Form 创建、校验和解析表单的基础--（手冊）

    1.  创建表单对象 创建表单对象很easy:仅仅要实现 Zend_Form: <?php $form = newZend_Form; ? > 对于高级用例.须要创建 Zend_Form ...

  6. vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...

  7. 4 htmlCSS&图像&表格&列表&表单&框架&颜色

    CSS: Cascading Style Sheeet   层叠样式表  cascadig:瀑布 html:网页的结构 css:网页的外观 JavaScript:网页的动作 CSS的使用方式: 内联样 ...

  8. 序列化layer创建的弹出表单并ajax提交

    /** *createTime:2015-09-13 *updateTime:2015-09-13 *author:刘俊 *phone:13469119119 *QQ:418873053 **/ va ...

  9. 通过springboot 去创建和提交一个表单(七)

    创建工程 涉及了 web,加上spring-boot-starter-web和spring-boot-starter-thymeleaf的起步依赖. 1 2 3 4 5 6 7 8 9 10 11 1 ...

随机推荐

  1. idea2019版与maven3.6.2版本不兼容引发的血案

    昨天遇到了点问题解决浪费了一些时间(导致更新内容较少)回顾下问题 项目出现Unable to import maven project: See logs for details 翻了好多博客 莫名的 ...

  2. numpy.random.rand

    numpy.random.rand(d0,d1,...,dn ) 给定形状中的随机值. 创建一个给定形状的数组,并用统一分布的随机样本填充它.[0, 1) 参数: d0,d1,...,dn:int,可 ...

  3. 告诉你如何回答"线上CPU100%排查"面试问题

    不知道在大家面试中,有没有遇到这个问题: 生产服务器上部署了几个java程序,突然出现了CPU100%的异常告警,你如何定位出问题呢? 这个问题分为两版回答!高调版对不起,我是做研发的,这个问题在生产 ...

  4. 什么是STM32的ISP？

    上一篇笔记分享了STM32的串口IAP实例:STM32串口IAP分享.其中,下载IAP程序时用ISP的方式进行下载.这里的ISP又是什么呢? ISP方式下载程序原理 ISP:In System Pro ...

  5. window 下Notepad++设置为文本文件的默认打开程序失败

    1.右键Notepad++的可执行程序,选择"属性"  -- "兼容性" , 设置Notepad++以管理员的身份运行 2.打开Notepad++ ," ...

  6. Python斐波那契数列

    今天偶然看到这个题目,闲着没事练一下手 if __name__ == '__main__': """ 斐波那契数列(Fibonacci sequence), 又称黄金分割 ...

  7. python学习-变量和简单类型（二）

    学习笔记中的源码:传送门 1.注释: 单行注释(#):多行注释("""或者''') 2.python标准数据类型:数字(numbers).字符串(string).列表(l ...

  8. 1.在ubuntu中软件安装在哪里?

    ubuntu下安装软件有四种方式: 1.通过deb格式的离线软件包安装 sudo dpkg -i xxx.deb # 安装包,安装程序   -i: install sudo dpkg -r packa ...

  9. C#刷遍Leetcode面试题系列连载（5）：No.593 - 有效的正方形

    上一篇 LeetCode 面试题中,我们分析了一道难度为 Easy 的数学题 - 自除数,提供了两种方法.今天我们来分析一道难度为 Medium 的面试题. 今天要给大家分析的面试题是 LeetCod ...

  10. cordova开发环境搭建

    最近我在尝试了解跨平台技术的发展,首先则是想到了cordova.本文简单记录下cordova环境搭建的过程. 安装cordova 首先是要npm全局安装cordova npm install -g c ...