CSS图片链接、映射

最新推荐文章于 2023-05-03 16:56:46 发布

_墨___攻_

最新推荐文章于 2023-05-03 16:56:46 发布

阅读量2.7k

点赞数

分类专栏： HTML 文章标签： css HTML

本文链接：https://blog.csdn.net/guoyongli1990/article/details/50900966

版权

HTML 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

CSS图片链接：将一个图片作为链接使用。

<!DOCTYPE html>
<html>
	<head>
		<style>
			p{font-family:"华文行楷";font-size:20px}
		</style>
	</head>
	<body>
		<p>创建图片链接：
			<a href="http://www.baidu.com" ><img src="smiley.gif" alt="百度" width="32" height="32">  </a>
		</p>
	</body>
</html>

CSS图片映射：创建带有可供点击区域的图像地图，其中的每个区域都是一个超级链接。

<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。

<area> 元素始终嵌套在 <map> 标签内部。

<img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。

<!DOCTYPE html>
<htnl>
	<body>
		<p>点击太阳或者其他行星，注意变化：</p>
		<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
		<map name="planetmap">
			<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" >       
			<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
			<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
		</map>
	</body>
</htnl>

coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。

值	描述
x1,y1,x2,y2	如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
x,y,radius	如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn	如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。