整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
首先我们看看效果：
实现这样的功能需要学习以下几点内容。
1.认识<img/><map><area/></map>基本结构
首先复制一个html框架，命名为“图片区域链接.html”,示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>图片区域链接</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>向<body></body>中添加<img><map><area/></map>基本结构，示例代码如下：
<body>
<img/>
<map>
<area/>
</map>
</body> 指定要添加区域链接的图片的路径，如下：
<img src="img/image1.jpg"/>
<map>
<area/>
</map>让<img>标签通过<map>的名字来驱使<map>为自己工作。
需要两步，第一，给<map>起名字，name=“map”，为了兼容所有的浏览器，还要加上id=“map”（有的浏览器只认id）。
第二，让<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字时要加#。这个在之前的教程中也经常出现。
示例代码如下：
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area/>
</map>下面来划分区域。
2.为图片划分区域的方法
<area>是用来划分区域的标签，area也是“”区域“”的意思。
默认的shape（形状）属性有“矩形（rect）”、“圆形（circ）”、“多边形（poly）”三个值。
分别添加三个形状，示例代码如下：
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area shape="rect"/>
<area shape="circ"/>
<area shape="poly"/>
</map>下面我们就要为区域规定参数，也就是在图像上的位置和范围大小。
为<area>添加coords属性可以指定区域的位置和范围。
如果shape="rect" 则coords由四个参数组成。例如coords="0,0,50,50"。从左到右，两两一组，组成两个平面坐标，即（0,0）和（50，50），单位是“像素”，矩形区域如下：
如果shape=“circ”，coords=“50,50,10”。（50,50）定义了圆心，10是半径。如图：
如果shape=“poly”，coords的参数不少于3对！注意是“对”！从左到右，两个数就是一组坐标，三组坐标可以确定一个三角形，多组坐标可以确定多边形。例如
这组参数画出了下图中歼20的边框线（600像素*400像素，如果图像的长宽像素数变了，参数就不正确了），如图：
这时，大家会有一个问题：如何才能知道图像中某个像素点的坐标呢？
3.使用Gimp软件精准定位图片区域
使用Gimp软件可以解决这个问题。
Gimp是一款类似于Photoshop的数字图像处理软件，不同的是，Gimp是开源免费的。
下载地址：https://www.gimp.org/
双击安装即可，注意选择一下安装目录。
完成安装之后打开，界面如下：
点击“文件”找到“打开”：
选择要打开的图片名字：
点击名称后，右边会有图像预览，点击“打开”即可：
打开后如图：
把鼠标放到图像的任意位置，看左下角：
这里就会显示我们鼠标所在的像素坐标数值。
这样我们就能方便地写“poly”的coords了。
请在空闲时找一张图片演练一下吧！
4.为区域添加链接
在<area/>标签中添加href属性即可指定链接路径，如下：
href="https://www.zhihu.com/question/284642168" 添加title属性可以在鼠标滑过链接区域时提示读者，如下：
title="歼20气动外形分析"今天的内容结束了，图像区域链接在使用时还有一些注意事项，我们下次再详细讨论。
使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、多行文本
单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。在HTML中，多行文本框使用的是textarea标签，而不是input标签。
语法：<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
举例：
记：首先我们可以利用JavaScript脚本，调用对应列表的id来实现动态效果的展示，但是，如果遇到像淘宝一样的网站，他的菜单比较多的情况的时候，我们通过动态绑定的方式就比较麻烦了。
所以，今天给大家介绍一个可以动态设置方式
在Html中建立对应的列表元素，如下
同时你要设置你的<li>标签下的<di>标签的display设置成none（就是把dl整个框架隐藏起来）
写代码之前，我们先来了解下实现原理
通过js获取<li>标签的一个集合
然后动态给每个<li>标签添加一个index（下标)
再次循环便利数组，将每一个<di>标签的css属性置空（如果没有用到css可以忽略）或者将原文的style标签下的display再次重新设置成none
找到正在操作的<li>标签节点，修改他的css属性或者display属性
下面我们来看看代码的实现
*请认真填写需求信息，我们会在24小时内与您取得联系。
