一.一般连接
最先，做一个一般的网页，而且在网页中插入一张图片。
代码入下:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
</head>
<body>
<img src=”./test.jpg”>
</body>
</html>
![HTML网页制作：[3]如何给图片添加超链接](https://cdn.d1wan.com/wp-content/uploads/2022/05/20220523021611-628aee6baf52e.jpg)
2.怎样加上超链呢？这就需要使用<a>标识来进行。
那麼，如何给照片加上超链呢？只需把<img>标识放到<a>和</a>中间就可以了。
而a标签又有一个主要参数：href.该参数用于特定连接的详细地址，假定我们要连接到百度搜索。那麼变更代码如下所示：
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
</head>
<body>
<a href=”http://www.baidu.com”><img src=”./test.jpg”></a>
</body>
</html>
![HTML网页制作：[3]如何给图片添加超链接](https://cdn.d1wan.com/wp-content/uploads/2022/05/20220523021612-628aee6c5ebf7.jpg)
3.储存后点一下该网页。以后，点一下网页上照片。看，取得成功联接到了百度搜索。
![HTML网页制作：[3]如何给图片添加超链接](https://cdn.d1wan.com/wp-content/uploads/2022/05/20220523021613-628aee6d3e9c5.jpg)
4.起诉流程，有一个关键点！
href的值不可以使www.baidu.com。不然会出差错。务必要写绝对地址http://www.baidu.com才可以!
二.商品详情页连接
起诉时最一般的连接方法，实际上要有一种更高等级的衔接方式。
在HTML中，可以把照片区划为好几个热门地区，随后让每一个网络热点地区各自连接到不一样的地区！
强大吧！
可以看代码：
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
</head>
<body>
<img src=”./test.jpg” usemap=”#mymap”>
<map name=”mymap”>
<area shape=”rect” coords=”0,0,20,20″ href=”http://www.baidu.com” title=”梅园”>
<area shape=”rect” coords=”30,30,20,20″ href=”http://mail.163.com” target=”_blank” title=”a园”>
</map>
</body>
</html>
![HTML网页制作：[3]如何给图片添加超链接](https://cdn.d1wan.com/wp-content/uploads/2022/05/20220523021614-628aee6e1660f.jpg)
下边来剖析代码：
1）<img src=”./test.jpg” usemap=”#mymap”>
意思是，在该照片中，应用名叫mymap的投射图象名字。
2）<map name=”mymap”>
意思是，界定商品详情页图象，名字为mymap
3)<area shape=”rect” coords=”0,0,20,20″ href=”http://www.baidu.com” title=”梅园”>
意思是，对map的一个商品详情页点开展界定。rect意味着方形，coords意味着商品详情页标志，href为必须衔接的详细地址。
OK，剩余的英语的语法都没有什么好说的了。
然后，开启网页，可以发觉，当把电脑鼠标放到左上方的情况下，电脑鼠标会变为“手”的样子。点一下，变会进到对应的连接。
自然，下标志的并不太精确，但大约是那么个部位，仅供参考。
![HTML网页制作：[3]如何给图片添加超链接](https://cdn.d1wan.com/wp-content/uploads/2022/05/20220523021614-628aee6ebb87c.jpg)
这儿再及时补充一点：
shape的选值可以有好几个：
1）rect：刚用了，意味着方形，他之后的坐标系为4个，前2个为坐在座标（x，y），后2个为右下方座标
2）circle：环形的座标。后边的坐标系为3个。前2个为椭圆形的座标，最后一个为半经。
自然，也有很多其它的，也不罗列了，所说边越大，则座标越多，不难理解吧。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
