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

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

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

首先，我们需要了解HTML中如何添加图片。在HTML中，我们使用`<img>`标签来插入图片。`<img>`标签有几个重要的属性，包括`src`、`alt`和`width`、`height`等。`src`属性用于指定图片的URL地址，`alt`属性用于提供图片无法加载时的替代文本，而`width`和`height`属性则用于设置图片的宽度和高度。

下面是一个简单的示例，展示如何在HTML中添加图片：

<img src="这里写图片地址，要带http协议，比如：https://www.chaojilu.com" alt="看不到图片，就显示这个文字" width="500" height="300">

在这个示例中，我们使用了`<img>`标签，并通过`src`属性指定了图片的URL地址。同时，我们还设置了`alt`属性以提供替代文本，并通过`width`和`height`属性设置了图片的尺寸。

接下来，我们来看如何为图片添加超链接。在HTML中，我们使用`<a>`标签来创建超链接。`<a>`标签的`href`属性用于指定链接的目标地址。为了将图片包含在超链接中，我们可以将`<img>`标签放置在`<a>`标签内部。

下面是一个示例，展示如何为图片添加超链接：

<a href="https://www.chaojilu.com">
<img src="image.jpg" alt="看不到图片，就显示这个文字"width="这里写宽度" height="高度">>
</a>

在这个示例中，我们将`<img>`标签放置在`<a>`标签内部，并通过`href`属性指定了链接的目标地址。当用户点击图片时，将会跳转到指定的网址。同时，我们还通过`alt`属性为图片提供了替代文本，以便在图片无法加载时为用户提供提示。

除了基本的添加图片和超链接功能外，我们还可以通过一些技巧来优化图片的显示和加载效果。例如，我们可以使用CSS样式来设置图片的边框、圆角等外观属性，提升页面的美观度。同时，我们还可以通过压缩图片文件大小、使用懒加载等技术来优化图片的加载速度，提高用户体验。

需要注意的是，在添加图片和超链接时，我们需要确保所使用的图片资源是合法且可访问的。避免使用未经授权或侵权的图片资源，以免引发法律问题。同时，我们还应该关注图片的版权和使用协议，确保在使用图片时遵守相关规定。

总之，通过使用HTML的`<img>`和`<a>`标签，我们可以轻松地在网页中添加图片并为图片添加超链接。通过合理设置属性和优化技巧，我们可以提升图片的显示效果和加载速度，为用户提供更好的浏览体验。

各位鹿友有什么不懂可以在评论区留言，咱们一起探讨学习。

.什么是文本和图像链接！

浏览网页时，会看到一些带下划线的文字。，将光标移到文字上时，光标将变成手形，单击会打开一个网页，这样的链接就是文本链接。

在网页中浏览内容时，若将光标移到图像上，光标会变成手形，单击会打开一个网页，这样的链接就是图像链接。

文本链接

图像链接

2.创建链接的方法！

使用<a>标签可以实现网页超链接，但<a>标签需要定义锚来指定链接目标。锚（anchor）有两种用法，介绍如下：

（1）通过使用href属性，创建指向另外一个文档的链接（或超链接）；

（2）通过使用name和id属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）。

使用href属性的代码格式如下：

<a href="链接地址">创建链接的文本或图片</a>

使用name属性的代码格式如下：

<a name="value">创建链接的文本或图片</a>

name属性用于指定锚（anchor）的名称，可以创建（大型）文档内的书签。

使用id属性的代码格式如下：

<a id="value">创建链接的文本或图片</a>

3.创建网页内的文本链接！

创建网页内的文本链接主要使用href属性来实现，如在网页中做一些知名网站的友情链接，具体操作方法如下。

（1）编写代码如下图所示：

（2）在浏览器中打开文件，预览效果如下所示，可以看到带有超链接的文本呈现浅紫色。

小提示：链接地址前的“http:// ”不可省略，否则会出现错误提示。

4.创建网站内的图像链接！

使用<a>标签为图片添加链接的代码格式如下：

下面是一个简单的图片链接案例。

（1）编写代码如下图所示：

（2）在浏览器中打开文件，预览效果如下所示。光标放在图片上呈现抓手形，单击后可跳转到指定网页。

浏览器截图

小提示：文件中的图片要和当前网页文件在同一个目录下，链接的网页没有加“http:// ”，默认为当前网页所在目录。

在线咨询

上一篇：cf活动链接！值的收藏！（3）
下一篇：简单小程序：登录页面（html）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

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

目录

您的项目需求