您的位置：首页 > Web前端 > CSS

CSS图片链接、映射

2016-03-16 14:09 357 查看
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"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css HTML
相关文章推荐
新的分享
章节导航