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

css image 热区

2015-10-23 10:27 453 查看

热区就是你指定图片的一个区域点击那里可以跳转到指定页面

链接就是点击图片的任意地方跳转到指定页面

图片热区说明：

代码如下：

<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>自定义热区</title>
<style type="text/css">

body {text-align:center;}

/* 设置link为子对象定位基点(子对象将相对父容器定位) */

#link {position:relative;width:524px;margin:0 auto;}

/* 设置所有链接透明度 */

#link a {filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}

/* 把所有链接设置为绝对定位，设置内补丁，设置边框，设置显示模式，设置文本缩进，设置链接修饰，设置背景图片 */

#link a {position:absolute;padding:10px;border-width:2px;display:block;text-indent:-9999px;text-decoration:none;background:url("no.gif");}
'

/* 设置各链接区域位置与高宽 */

#link a.on1 {width:24px;height:18px;left:0;top:0;}

#link a.on2 {width:235px;height:110px;left:265px;top:0;}

#link a.on3 {width:240px;height:600px;left:0;top:130px;}

#link a.on4 {width:235px;height:600px;left:265px;top:130px;}

/* 设置所有链接鼠标经过状态 */

#link a:hover {border:dashed red 2px;display:block;color:#000;font-weight:bold;background-color:#fff;}

/* 设置各链接当鼠标经过时状态 */

#link a.on1:hover {filter:alpha(opacity=100);-moz-opacity:1;opacity:1;background-color:transparent;}

#link a.on2:hover {text-indent:0;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}

#link a.on3:hover {border-color:#000;}

#link a.on4:hover {background-image:url(

);}

</style>

</head>

<body>

<div id="link">

<a href="#" class="on1"> 玩号热区</a>

<a href="#" class="on2"> 图号热区</a>

<a href="#" class="on3"> 四锐号热区</a>

<a href="#" class="on4"> 佛号热区</a>

</div>

<div id="pr">

<img src="22.JPG" alt="用CSS自定义热区" />

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航