图像映射是将一些区域变成热点,我们在网上获取搜索图片,图片上会有关于任务的简短信息介绍,还有一个接触更多的就是QQ空间的相册,浏览QQ空间照片鼠标滑动到人物头像的时候让你选择标记人物,都是将图片和内容混合在一起进行表现。用户在看图片的时候不在是冰冷冷的图片,其实就是实现起来这种内容和图片的映射很简单,简单的看下效果:

Html代码:

    <!-- 博客园-FlyElephant http://www.cnblogs.com/xiaofeixiang/ -->
<div class="group-img">
<img src="../../public/images/group.jpg" alt="合影">
<ul>
<li class="li">
<a href="http://www.cnblogs.com/xiaofeixiang/">
<span class="outer">
<span class="inner">
<span class="note">李连杰</span>
</span>
</span>
</a>
</li>
<li class="yao">
<a href="http://www.cnblogs.com/xiaofeixiang/"> <span class="outer">
<span class="inner">
<span class="note">姚明</span>
</span>
</span>
</a>
</li>
</ul>
</div>

 CSS代码:

    .group-img {
width: 423px;
height: 480px;
position: relative;
} .group-img a {
position: absolute;
display: block;
text-decoration: none;
color: #000;
border: 1px solid transparent;
} .group-img a .outer {
display: block;
border: 1px solid transparent;
} .group-img a .inner {
display: block;
width: 100px;
height: 80px;
border: 1px solid transparent;
margin: 3px;
} .group-img a .note {
position: absolute;
top: 100px;
left: -9999px;
background: #BDBDBD;
width: 106px;
padding: 5px;
text-align: center;
color: #fff;
} .group-img .li a {
top: 100px;
left: 120px;
} .group-img .yao a {
top: 8px;
left: 260px;
} .group-img a:hover,
.group-img a:focus {
border: 1px solid #d4d82d;
} .group-img a:hover .outer,
.group-img a:focus .outer {
border: 1px solid #00FF7F;
} .group-img a:hover .inner,
.group-img a:focus .inner {
border: 1px solid #00CED1;
} .group-img a:hover .note,
.group-img a:focus .note {
left: 0px;
}

CSS布局需要注意两点将容器的大小和图片的大小保持一致,不显示的文字通过left隐藏文字,鼠标滑动的时候回归正常~

CSS-图像映射的更多相关文章

  1. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  2. HTML图像映射

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

  3. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  4. html 图像映射(一个图像多个连接)

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

  5. 图像映射map

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

  6. html 图像映射

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

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

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

  8. HTML <area> 标签 带有可点击区域的图像映射(图像映射指的是带有可点击区域的图像)

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

  9. 图像热点&图像映射

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

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

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

随机推荐

  1. 贝壳找房魔法师顾问[并查集+DAG判断]

    题目链接[https://nanti.jisuanke.com/t/27647] //计蒜客2018复赛D题,想简单了. 题解: 题目是中文的,不再赘述. 题解: 分为三种情况:1.两个字符串都不能变 ...

  2. BSGS算法学习

    嗯哼大步小步法. 一个非常暴力的想法. 注意到如果设C = ⌈√P⌉,那么任何一个数都可以写 成a1 * C + b1的形式,其中a1, b1 都< C. 那么预处理出A^i*C的值.然后在询问 ...

  3. android 获取系统默认路径

    Environment.getDataDirectory().getPath() : /dataEnvironment.getDownloadCacheDirectory().getPath()  : ...

  4. gdb 调试及优化

    调试程序时,在gdb内p var,会提示 No symbol "var" in current context. 即使没有使用任何编译优化选项,仍然不能查看,可能是这些变量被优化到 ...

  5. 用runtime来重写Coder和deCode方法 归档解档的时候使用

    当我们归档自定义对象的时候,可以重写自定义Model的的encodeWithCoder和initWithCoder 开始的大概是这样的,当属性非常多的时候 这种方式就会觉得不还好 好像重复在做一样的事 ...

  6. C#调用C++Dll封装时遇到的一系列问题

    最近帮底层开发的同时用C#重新封装一下dll,也就是用C#类来封装C++Dll里的方法,以供用户使用. 之前也用到过类似的应用,大多数问题都出在类型转换上,但是这次的应用层出不穷,所以在这里总结一下, ...

  7. 鸟哥的Linux私房菜 基础学习篇读书笔记(9):Linux磁盘与文件系统管理(2)

    上一篇文章主要从理论上分析了Linux的Ext2文件系统.这一篇主要解说怎样查看Linux的文件系统的容量以及解说Linux文件系统中的连接文件. 能够通过df和du命令来查看磁盘与文件夹的容量.df ...

  8. IOS-UITableView入门(2)

    1.对于TableView .每一个item的视图基本都是一样的. 不同的仅仅有数据. IOS提供了一种缓存视图跟数据的方法.在 -UITableViewCell *) tableView:cellF ...

  9. Using an LPC-Link2 as an LPC4370 evaluation board

    https://www.lpcware.com/content/faq/lpcxpresso/using-lpclink2-as-lpc4370-eval As well as being a sta ...

  10. C++获取和设置时区

    一.     获取当前系统时区信息 使用API函数GetTimeZoneInformation可以获得当前时区的相关信息,函数原型为 DWORD GetTimeZoneInformation( LPT ...