来源: 实验楼

创建图像映射

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

    我是一个vim爱好者,项目开发过程中,大量地使用vim作为编辑工具. 今天刚开箱了一台新的 CentOS7, 现将Vim安装后的一些基本配置作一下记录. 使用配置模板 vim安装完之后,大多数配置都是 ...

  2. Java中Integer.parseInt和Integer.valueOf，你还傻傻分不清吗？

    在Java的Integer类中,有Integer.valueOf(String s)和Integer.parseInt(String s)两个静态方法,他们都能够将字符串转换为整型,他们到底有什么区别 ...

  3. [NOIp2011] luogu P1313 计算系数

    继续水博客,待会回去上术学. 题目描述 给定一个多项式 (by+ax)k(by+ax)^k(by+ax)k ,请求出多项式展开后 xn×ymx^n \times y^mxn×ym 项的系数. Solu ...

  4. MySQL 日志系统之 redo log 和 binlog

    之前我们了解了一条查询语句的执行流程,并介绍了执行过程中涉及的处理模块.一条查询语句的执行过程一般是经过连接器.分析器.优化器.执行器等功能模块,最后到达存储引擎. 那么,一条 SQL 更新语句的执行 ...

  5. RIDE的External Resources

    External Resources(外部资源):主要指不在project管辖范围内的资源文件. 通俗来说,如果是目录的project,只要不在自己目录范围内的资源文件都算外部资源:如果是文件的pro ...

  6. linux下python相关命令

    若本机已安装python2,尽量不要动现有的python2,额外安装python3即可. 1.安装python3.6(centos下安装python3自带pip和setuptools) python3 ...

  7. ios 11 系统CPU过高，xib中textfield使用导致出过高

    ios11 发布之后,作为开发肯定是第一时间进行了升级测试,全新的系统不免会带来这样那样的问题.项目中使用xib的小伙伴们会发现,项目的cpu使用率非常高,尤其是初始化的时候,并没有线程的操作,CPU ...

  8. 解决Anki服务器同步问题：坚果云 & Floder sync (已测试)

    读前须知: 更新日期:2019-07-08 1.本教程面向对象为:有一定计算机知识人群 2.配合参考链接中的文章,共同食用. 3.已经过测试,可同步图片,音频,视频 4.尝试有风险,提前导出Anki卡 ...

  9. Activity 的 36 大难点，你会几个？「建议收藏」

    前言 学 Android 有一段时间了,一直都只顾着学新的东西,最近发现很多平常用的少的东西竟让都忘了,趁着这两天,打算把有关 Activity 的内容以问题的形式梳理出来,也供大家查缺补漏. 本文中 ...

  10. 函数基础(二)(day11整理)

    目录 昨日内容 函数的定义 函数的三种定义方式 空函数 有参函数 无参函数 函数的调用 函数的返回值 函数的参数 形参 实参 今日内容 可变长参数 可变长形参 可变长实参(仅作了解) 函数对象 函数嵌 ...