如何制作超链接,网页制作超链接教程
一.普通链接
首先,做一个普通的网页,并且在网页中插入一张图片。
代码入下:
&<html&>
&<head&>
&<meta http-equiv=&”Content-Type&” content=&”text/html; charset=utf-8&″ /&>
&<title&>无标题文档&</title&>
&</head&>
&<body&>
&<img class=&”aligncenter&” src=&”./test.jpg&”&>
&</body&>
&</html&>
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 class=&”aligncenter&” src=&”./test.jpg&”&>&</a&>
&</body&>
&</html&>
3.保存后点击该网页。之后,点击网页上图片。看,成功连接到了百度。
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 class=&”aligncenter&” 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&>
下面来分析代码:
1)&<img class=&”aligncenter&” 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,剩下的语法都没什么好说的了。
接着,打开网页,可以发现,当把鼠标放在左上角的时候,鼠标会变成“手”的形状。点击,变会进入相应的链接。
当然,下图标的并不太准确,但大概是这么个位置,供参考。
这里再补充一点:
shape的取值可以有多个:
1)rect:刚用了,代表矩形,他后面的坐标为4个,前两个为坐上坐标(x,y),后两个为右下坐标
2)circle:圆形的坐标。后面的坐标为3个。前两个为圆形的坐标,最后一个为半径。
当然,还有许多其他的,就不列举了,所谓边越多,则坐标越多,不难理解吧。