来源: 实验楼

创建图像映射

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

    安装python3 sudo apt-get install python3-dev build-essential libssl-dev libffi-dev libxml2 libxml2-dev ...

  2. redis系列之------数据库

    前言 当我们在Redis数据库中set一个KV的时候,这个KV保存在哪里?如果我们get的时候,又从哪里get出来.时间复杂度,空间复杂的等等,怎么优化等等一系列问题. 服务器中的数据库 Redis服 ...

  3. 前端知识点总结——jQuery（下）

    1. 排队和并发 1.并发: 多个css属性同时变化放在一个animate函数内的多个css属性默认并发变化 2.排队: 多个css属性先后变化对同一个元素,先后调用多个动画API,都是排队执行原理: ...

  4. AppBoxFuture: 服务模型的在线调试与性能监测

      框架内的服务模型(ServiceModel)用于处理各类业务逻辑(如最简单的CRUD操作),在设计时以类似于伪代码的形式存在,发布时后端会通过Roslyn转换并编译为运行时代码.为了方便开发者作者 ...

  5. LeetCode初级算法--动态规划01：爬楼梯

    LeetCode初级算法--动态规划01:爬楼梯 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net ...

  6. fullpage.js的引入方法

    1.先到官网上(https://github.com/alvarotrigo/fullPage.js)下载压缩包 2.引入文件 3.布局基本页面结构 4.实现全屏滚动(JS代码) <script ...

  7. mysql数据库limit分页，排序操作

    看到网上很多朋友在问,limit分页之后按照字段属性排序的问题,在这里分享一下我的用法: 1.网上答案: 每页显示5个,显示第三页信息,按照年龄从小到大排序 select * from student ...

  8. gulp 自动化管理工具实现全过程

    1.全局安装gulp npm install gulp -g 2.项目内安装gulp npm install gulp -s 3.项目根目录新建gulpfile.js js内代码: //载入gulp核 ...

  9. 关闭ESlint 语法检测配置方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qappleh/article/detai ...

  10. Spring Boot2 系列教程(十八)Spring Boot 中自定义 SpringMVC 配置

    用过 Spring Boot 的小伙伴都知道,我们只需要在项目中引入 spring-boot-starter-web 依赖,SpringMVC 的一整套东西就会自动给我们配置好,但是,真实的项目环境比 ...