HTML中的图片区域链接方法详解-零基础自学网页制作

图片添加区域链接的基本写法

首先我们看看效果：

实现这样的功能需要学习以下几点内容。

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气动外形分析"

今天的内容结束了，图像区域链接在使用时还有一些注意事项，我们下次再详细讨论。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

样式

链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。

1. 文本样式的链接

文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。

谷歌的文本链接是蓝色，没有下划线

百度的文本链接也是蓝色，关键词是红色，有下划线

而京东的文本链接有灰色，有白色，有黑色

2. 按钮样式的链接

按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。

按钮样式链接

3. 图片样式的链接

图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。

如桌面弹出这种游戏小窗口的图片式链接

由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位

打开方式

链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。

提示用美拍APP打开

类型

按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。

链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。

1. 内部链接

与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。

2. 锚点链接

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

3. 外部链接

外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。

外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。

如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。

链接状态

链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：

点击前

悬停时，下面浮现半透明线条

点击时，有波纹晕开的动态效果

点击后，下面线条粗

有时候是3种状态，比如百度网和知乎应用：

默认状态

点击时链接变红

点击后链接变成紫色

IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。

默认状态

点击状态

用力点击会弹出预览小窗口

有些时候只有2种状态，如下图谷歌网：

默认和点击后状态一样

鼠标悬停时出现下划线

默认状态

点击时

而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。

总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。

作者：潘瑶琼（简书作者）

本文由 @潘瑶琼授权发布于人人都是产品经理，未经作者许可，禁止转载。

用图片区域链接的注意事项

1.图片尺寸不能变

使用<area>标签定义图片区域链接时的coords属性值只能是数字！

这就意味着一旦改变使用<map><area/></map>定义区域链接的图片尺寸发生改变，之前定义的区域也就不能覆盖在正确的画面位置了。

在网页制作中，如果我们把<img/>标签的"width"或“height”设为百分数，随着浏览器视域范围的改变，图片区域链接将会发生错误。

我们来演示一下，代码如下：

<!DOCTYPE HTML>
    <html>
        <head>     
            <title>图片区域链接</title>    
            <meta charset="utf-8">    
        </head>     
        <body>
            <div style="width:100%;">
            <img  src="img/image1.jpg" usemap="#map"/>
            <map name="map" id="map">
                <area shape="poly" coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="歼20气动外形分析"/>
            </map>
            </div>    
        </body>
    </html>

这时，图片尺寸和区域链接是匹配的。

如果我们修改<img/>中的width属性，情况就会发生变化，如下：

<img width="100%" src="img/image1.jpg" usemap="#map"/>

效果如图：

图片放大后，区域链接位置不再正确匹配。

如果同时修改<img/>以及外部的<div>的“width”，也会发生类似情况，如下

<div style="width:25%;">
            <img width="100%" src="img/image1.jpg" usemap="#map"/>

效果如图：

超出图片尺寸范围后，点击时，区域链接的外边框也不会显示出来。

我们当然不希望这种情况的发生，有解决办法吗？

当然有，一种是“笨”方法，一种是“聪明”方法。

先说“聪明”方法：就是使用JavaScript，设置触发事件，调取视窗宽度，算出视窗高宽变化比例，然后为coords属性值乘以这个比例，就可以实时随图片变化改变区域链接范围了。不过目前我们还不能写出JavaScript脚本。

“笨”方法就是尽量不在代码中改变图片尺寸，而是针对页面布局的尺寸去添加一张尺寸相符的图片。

也就是直接改变图片尺寸后替换原图片，或输出为一张新图片在页面中使用。

这就要介绍一下如何使用Gimp去改变图片尺寸。

2.预先计算图片尺寸的方法

在改变图片尺寸之前要预先计算图片恰当的尺寸。

例如我做了一个居中显示的页面，但是图片尺寸太大，不能正常显示，如图：

正常的话我们会使用<img/>的width属性来设置，但是因为有区域链接，所以还是要修改图片的真实尺寸。

这个页面中内容都是写在一个<div>中，它的宽度是600px，我们只要让图片的宽度等于600px就可以正常显示了。

我使用Gimp修改长宽后，输出了一张叫做“image1.jpg”的图片。

我们看下效果。如图:

我们来看一下操作过程吧。

3.使用Gimp软件修改图片尺寸

第一步，打开软件，导入大尺寸图片，如图：

大家观察一下F20.jpg尺寸。

第二步，在菜单栏中找到“图像”按钮，点击后，找到“缩放图像”，如图:

第三步，修改图像尺寸，首先确定等比例缩放是否激活。如图：

红框中的图标就是等比例锁定的图标。

将“宽度”数值修改为600。然后，点击红框中的等比例图标。如图：

变成这样：如图：

然后点击“缩放”。如图：

最后一步就是输出为“image1.jpg”了。如图：

export as就是“输出为”的意思，点击后选择存储路径和格式，如图：

这里我们选择jpg，如图

点击导出后就可以了。

完整操作过程见视频：

最后我们在html中修改<img/>中的路径与名称就可以正常显示了。

今天的内容结束了。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

整合营销服务商

HTML中的图片区域链接方法详解-零基础自学网页制作

图片添加区域链接的基本写法

目录

定义

样式

1. 文本样式的链接

2. 按钮样式的链接

3. 图片样式的链接

打开方式

类型

1. 内部链接

2. 锚点链接

3. 外部链接

链接状态

用图片区域链接的注意事项

目录

您的项目需求