zoukankan      html  css  js  c++  java
  • 使用CSS实现圈人效果(CSS Sprites)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <title> css sprites </title>
      <style type="text/css">
    	body{font-size:14px;}
    	#imgmap{position:relative; 350px; height:263px; background:url('office.jpg') no-repeat;}
    	#imgmap .map{position:absolute;}
    	#imgmap .map span{font-weight:bold; color:#000000; padding:3px; background:#FFFFFF; border:1px solid #CCCCCC;}
    	#imgmap #d1{top:55px; left:109px;}
    	#imgmap #d1 a{display:block; 73px; height:69px; text-decoration:none;}
    	#imgmap #d1 a:hover{background:url('office.jpg') -109px -317px no-repeat;}
    	#imgmap #d1 a span{display:none;}
    	#imgmap #d1 a:hover span{position:absolute; top:-25px; 95px; display:block;}
    
      	#imgmap #d2{top:111px; left:211px;}
    	#imgmap #d2 a{display:block; 47px; height:34px; text-decoration:none;}
    	#imgmap #d2 a:hover{background:url('office.jpg') -211px -373px no-repeat;}
    	#imgmap #d2 a span{display:none;}
    	#imgmap #d2 a:hover span{position:absolute; top:-25px; 60px; display:block;}
    
       	#imgmap #d3{top:165px; left:168px;}
    	#imgmap #d3 a{display:block; 81px; height:87px; text-decoration:none;}
    	#imgmap #d3 a:hover{background:url('office.jpg') -168px -427px no-repeat;}
    	#imgmap #d3 a span{display:none;}
    	#imgmap #d3 a:hover span{position:absolute; top:-25px; 80px; display:block;} 
    
       	#imgmap #d4{top:101px; left:72px; z-index:100;}
    	#imgmap #d4 a{display:block; 96px; height:54px; text-decoration:none;}
    	#imgmap #d4 a:hover{background:url('office.jpg') -72px -625px no-repeat;}
    	#imgmap #d4 a span{display:none;}
    	#imgmap #d4 a:hover span{position:absolute; top:-25px; 70px; display:block;}    
    
       	#imgmap #d5{top:124px; left:45px;}
    	#imgmap #d5 a{display:block; 64px; height:39px; text-decoration:none;}
    	#imgmap #d5 a:hover{background:url('office.jpg') -45px -386px no-repeat;}
    	#imgmap #d5 a span{display:none;}
    	#imgmap #d5 a:hover span{position:absolute; top:-38px; 107px; display:block;}    
    
      </style>
     </head>
    
     <body>
     
      <div id="imgmap">
    	<div class="map" id="d1"><a href="javascript:void(0)"><span>17寸的显示器</span></a></div>
    	<div class="map" id="d2"><a href="javascript:void(0)"><span>听筒坏了</span></a></div>
    	<div class="map" id="d3"><a href="javascript:void(0)"><span>白色的机箱</span></a></div>
    	<div class="map" id="d4"><a href="javascript:void(0)"><span>ThinkPad</span></a></div>
    	<div class="map" id="d5"><a href="javascript:void(0)"><span>我不知道这玩意是哪里买的</span></a></div>
      </div>
     
     </body>
    </html>
    


    例子背景圖:




  • 相关阅读:
    竖版文字排列实现《金刚般若波罗蜜心经》
    前端气泡效果实现的方式
    纯CSS绘制三角形
    什么是块级格式上下文
    绝对定位元素left、right、top、bottom值与其margin和宽高的关系
    currentColor在CSS的含义
    HTML/css清除浮动的几种方式
    W3C中不同标准的含义
    table表格标签的属性
    输入你的生日某年某月某日,判断这一天是这一年的第几天、星期几?
  • 原文地址:https://www.cnblogs.com/fdipzone/p/3715151.html
Copyright © 2011-2022 走看看