<!DOCTYPE html >

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style type="text/css">

 #pic{

     width:640px;

     height:425px;

     position:relative;/**关键点，这样可以让包含的链接相对于div的边缘进行绝对定位*/}

 #pic ul{

     margin:0;

     padding:0;

     list-style:none;/**不显示列表符号，将列表的margin和padding设为0*/

     }

 #pic a {

     position:absolute;

     width:100px;

     height:120px;

     text-indent:-1000em;/**对锚链接进行绝对定位，他们将移到容器div左上角。然后可以将他们定位到正确的人身上，形成热点，设置宽和高创建需要点击的区域链接文本仍然存在，使用一个大的负数作为文本缩进从而让他们从屏幕上消失。*/}

 #pic .rich a{

     top:15px;

     left:95px;

     }

 #pic .andy a{

     top:115px;

     left:280px;}

 #pic .jeremy a{

     top:250px;

     left:425px;}

 #pic a:hover{/**创建翻转效果，鼠标停留的时候实线*/

     border:1px solid #fff;}

 </style>

 </head>

 <body>

 <div id="pic">

 <img src="../CSSMastery/Chapter05/images/group-photo.jpg" width="640" height="425" alt="Richard , Andy and Jeremy"/>

 <ul>

 <li class="rich">

 <a href="http://www.clagnut.com/" title="Richard Rutter">Richard Rutter</a>

 </li>

 <li class="andy">

 <a href="http://www.andybudd.com/" title="Andy Budd">Andy Budd</a>

 </li>

 <li class="jeremy">

 <a href="http://www.adactio.com/" title="Jeremy Keith">Jeremy Keith</a>

 </li>

 </ul>

 </div>

 </body>

 </html>

【CSS系列】图像映射的更多相关文章

  1. HTML图像映射

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  3. html 图像映射（一个图像多个连接）

    以前就见过那种导航地图,点击地图的不同省份分别跳到不同的连接,现在用html实现一下,简单的. 图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址. 效果如图: ...

  4. 图像映射map

    <map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...

  5. html 图像映射

    个人先做而一个例子 <body> <img src="图像映射/enterdesk.com-D69055E2B422567CB273963EA05FF7D4.jpg&quo ...

  6. HTML <map> 标签－创建带有可点击区域的图像映射

    定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...

  7. HTML <area> 标签 带有可点击区域的图像映射（图像映射指的是带有可点击区域的图像）

    例子: <img src="planets.gif" width="145" height="126" alt="Plane ...

  8. 图像热点&图像映射

    图像映射 图像映射也称为图像热点. 作用: 让同一张图片上的不同区域,可以实现多个不同的超链接功能. 图示: <map>图像映射三步走: 图像映射的实现需要三方面配合完成: 1.图像映射容 ...

  9. 带有可点击区域的图像映射：HTML <map> 标签

    实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap&qu ...

  10. HTML <img>标签 创建图像映射

    初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap"> <area s ...

随机推荐

  1. C中结构体的存储分配

    C中结构体的存储分配 对于C语言中结构体所占的存储空间的大小,也一直是笔试面试的常客,今天好好看了一下这方面,以前一直以为很清楚了,今天通过各种实际测试举例,发现原来还是没有搞透彻,好在现在是彻底懂了 ...

  2. RESTful测试工具-RESTClient

    很多测试人可能对RESTful的概念还是很模糊的,那么到底什么是RESTful?百度百科给出的一句话描述是一个架构样式的网络系统,似乎还是有点不懂?OK,说到Restful,我们一般从REST开始说起 ...

  3. 标准Drupal7安装中文翻译出错解决办法

    这个问题在网上解决的方案一致都是说在\sites\default\settings.php文件,在最后增加以下两行: ini_set('memory_limit', '1280M'); //加大php ...

  4. WHAT EXACTLY IS WASM ?!

    终于, 我入门了当初很仇视的技术.... 什么是WebAssembly? WebAssembly或WASM是一个编译器目标(由编译器生成的代码),具有二进制格式,允许我们在浏览器上执行C,C ++和R ...

  5. MySQL的最大连接数

    mysql的最大连接数默认是100, 这个数值对于并发连接很多的数据库应用是远远不够的,当连接请求大于默认连接数后,就会出现无法连接数据库的错误,因此我们需要把它适当调大一些 设置新的MySQL最大连 ...

  6. Java打印整数的二进制表示(代码与解析)

    Java打印整数的二进制表示(代码与解析) int a=-99; for(int i=0;i<32;i++){ int t=(a & 0x80000000>>>i)&g ...

  7. 关于Cocos2d-x对象的定义和创建

    游戏可以包含很多个场景,每个场景又包含很多的层,每个层又包含很多的节点,这些节点,层,场景都可以看成一个一个的对象,我们把每一个彼此不同但又是同类型的对象归为一个类,为它创建一个单独的类,这个类有这些 ...

  8. CString常用函数

    转自:http://www.cnblogs.com/Caiqinghua/archive/2009/02/16/1391190.html CString( );例:CString csStr; CSt ...

  9. 如果分配给命令的连接位于本地挂起事务中，ExecuteNonQuery 要求命令拥有事务。命令的 Transaction 属性尚未初始化

    DbConnection dbc = database.CreateConnection(); DbTransaction dbtt = null; try { dbc.Open(); dbtt = ...

  10. 其它系统与domino系统单点登录的实现方式

     其它系统与domino系统单点登录的实现方式 [背景] 随着企业中业务不断增多,用户处理不同的业务则须要频繁的切换不同的系统进行操作.而用户则须要记住各个系统的username.password ...