这里以给word中的图片添加超链接，具体的 *** 作步骤如下：
1、首先打开电脑上的word文件。
2、进入word页面以后，选择你要插入超链接的图片并且点击页面上方的【插入】。
3、进入到插入页面以后，然后在页面的上方点击【超链接】。
4、最后在地址页面输入你要插入的网址，这里以百度为例，并且点击【确定】。
在桌面上新建一个文本文档。在这文本文档里复制下面的代码：<a href="你想要打开的另一个网页的地址"><img src="图片地址" border="0" width="宽度数字" height="高度数字">。
在网页上找到你要用的图片打开，然后在图片上点右键查看“属性”就可以看到图片的地址和尺寸，“width”是宽度，“height”是高度，图片的地址是右键单击图片属性得到的。
网址前面必需要带http://，而且，上面的连接网址两边的引号一定要是英文状态下的引号，如果用中文状态下的引号则链接不上，当然，你也可以所有的引号都不用。
把记事本文档另存为，文件名前面随便改，只是后缀要改为htm，例如：图片链接.htm。然后可以再桌面上看见刚刚保存的图片链接.htm文件，双击它，打开后，右键复制该图片，粘贴到你要插入图片的地方就行了！以后只要单击该图片，就能自动连接到你想要链接的网页了！
另外，如果想要改变图片的大小，方法是<img src=图片网址 width=宽度数字 height=高度数字>,比如：<img src=图片网址 width=300 height=200>如果不改变图片的宽度和高度比例的话，可以只填宽度数字或者比例，如width=50%，这样比较简单，方法是：<img src=网址 width=宽度数字或比例>
代码入下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<img src="./test.jpg">
</body>
</html>
2
那么，如何添加超链接呢？这就要用到<a>标签来完成。
那么，如何给图片添加超链接呢？只要把<img>标签放在<a>和</a>之间就可以了。
而a标签又有一个参数：href.该参数用来指定链接的地址，假设我们要链接到百度。那么更改代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="http://www.baidu.com"><img src="./test.jpg"></a>
</body>
</html>
3
保存后点击该网页。之后，点击网页上图片。看，成功连接到了百度。
4
上诉步骤，有一个要点！
href的值不能使www.baidu.com。否则会出错。必须要写绝对地址http://www.baidu.com才可以!
END
二.热区链接
1
上诉时最普通的链接方式，其实要有一种更高级的连接方法。
在HTML中，可以把图片划分为多个热点区域，然后让每一个热点区域分别链接到不同的地方！
厉害吧！
2
首先看代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=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>
3
下面来分析代码：
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，剩下的语法都没什么好说的了。
4
接着，打开网页，可以发现，当把鼠标放在左上角的时候，鼠标会变成“手”的形状。点击，变会进入相应的链接。
当然，下图标的并不太准确，但大概是这么个位置，供参考。
5
这里再补充一点：
shape的取值可以有多个：
1）rect：刚用了，代表矩形，他后面的坐标为4个，前两个为坐上坐标（x，y），后两个为右下坐标
2）circle：圆形的坐标。后面的坐标为3个。前两个为圆形的坐标，最后一个为半径。
当然，还有许多其他的，就不列举了，所谓边越多，则坐标越多，不难理解吧。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）