来源: 实验楼

创建图像映射

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

    navTree.js 简介 extends/navTree.js 是一个基于 layui 扩展的模块化组件,用于构建后台布局系统中的垂直导航菜单与水平导航菜单. extends/navTree.js ...

  2. springboot 快速开发的定制补充

    增强 SpringBoot 快速开发工具 项目地址:https://gitee.com/sanri/web-ui 优点:这是一个 web 通用配置的组件,即插即用,可用于新项目或私活.是对 Sprin ...

  3. 《锋利的jQuery》学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  4. [JZOJ100047] 【NOIP2017提高A组模拟7.14】基因变异

    Description 21 世纪是生物学的世纪,以遗传与进化为代表的现代生物理论越来越多的 进入了我们的视野. 如同大家所熟知的,基因是遗传因子,它记录了生命的基本构造和性能. 因此生物进化与基因的 ...

  5. go-select

    select语句属于条件分支流程控制方法,不过它只能用于通道. select语句中的case关键字只能后跟用于通道的发送操作的表达式以及接收操作的表达式或语句. ch1 := make(chan ) ...

  6. MFC中如何分割CString类型的数据

    [才疏学浅,难免有纰漏,若有不正确的地方,欢迎指教] MFC中有一个库函数 Tokenize(); 函数原型:CStringT Tokenize( PCXSTR pszTokens , int& ...

  7. c语言1博客作业02

    c语言1博客作业02 这个作业属于哪个课程 C语言程序设计 这个作业的要求在哪 [作业要求](https://edu.cnblogs.com/campus/zswxy/SE2019-2/homewor ...

  8. electron快捷键

    我们分为在主进程中注册快捷键和在渲染进程中注册快捷键 在主进程中我们有两种方式 一 利用[Menu]来模拟快捷键,只有app获得焦点时才生效,很少使用 const { Menu, MenuItem } ...

  9. Xbim.GLTF源码解析（一）：简介

    原创作者:flowell,转载请标明出处:https://www.cnblogs.com/flowell/p/10838972.html 简介 Xbim.GLTF是将IFC文件转换成GLTF文件的一个 ...

  10. 写出float x 与“零值”比较的if语句——一道面试题分析

    写出float  x 与“零值”比较的if语句 请写出 float  x 与“零值”比较的 if 语句: const float EPSINON = 0.00001; if ((x >= - E ...