css image 热区

最新推荐文章于 2022-07-03 15:26:27 发布

千寻～

最新推荐文章于 2022-07-03 15:26:27 发布

阅读量2.2k

点赞数

分类专栏：前端相关知识文章标签： css image 热区

前端相关知识专栏收录该内容

32 篇文章 2 订阅

订阅专栏

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

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

图片热区说明：

代码如下：

<!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([img]22.JPG[/img]);}  



</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>

千寻～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css image 热区

热区就是你指定图片的一个区域点击那里可以跳转到指定页面链接就是点击图片的任意地方跳转到指定页面图片热区说明：代码如下：自定义热区 body {text-align:center;} /* 设置link为子对象定位基点(子对象将相对父容器定位) */ #link {position:relative;width:524px;ma
复制链接

扫一扫