图像映射是将一些区域变成热点,我们在网上获取搜索图片,图片上会有关于任务的简短信息介绍,还有一个接触更多的就是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. Swift map filter reduce 使用指南

    转载:https://useyourloaf.com/blog/swift-guide-to-map-filter-reduce/ Using map, filter or reduce to ope ...

  2. Nessus漏洞扫描教程之安装Nessus工具

    Nessus漏洞扫描教程之安装Nessus工具 Nessus基础知识 Nessus号称是世界上最流行的漏洞扫描程序,全世界有超过75000个组织在使用它.该工具提供完整的电脑漏洞扫描服务,并随时更新其 ...

  3. Codeforces.786B.Legacy(线段树优化建图 最短路Dijkstra)

    题目链接 \(Description\) 有\(n\)个点.你有\(Q\)种项目可以选择(边都是有向边,每次给定\(t,u,v/lr,w\)): t==1,建一条\(u\to v\)的边,花费\(w\ ...

  4. 【坐标离散化】AOJ0531- Paint Color

    日文题……一开始被题目骗了以为真的要写文件? 题目大意&&解答戳:❀ #include<iostream> #include<cstdio> #include& ...

  5. [Java]Spring框架

    在这里学习Spring框架: >>spring&struts框架学习 >>spring >>Java回顾之Spring基础 >>IBM Java ...

  6. Codeforces Round #368 (Div. 2) C. Pythagorean Triples 数学

    C. Pythagorean Triples 题目连接: http://www.codeforces.com/contest/707/problem/C Description Katya studi ...

  7. Ural 2040. Palindromes and Super Abilities 2 回文自动机

    2040. Palindromes and Super Abilities 2 题目连接: http://acm.timus.ru/problem.aspx?space=1&num=2040 ...

  8. Docker系列之(四):Win10上运行Docker

    1. 前言 Docker最近推出了可以运行在Win10和Mac上的稳定版本,让我们赶紧来体验一下. 2. 安装准备 需要的条件为: 64bit Windows 10,开启Hyper-V 2.1 下载D ...

  9. 【原】Maven解决jar冲突调试步骤:第三方组件引用不符合要求的javassit导致的相关异常

    [环境参数]开发框架:Spring + MyBatis + SpringMVC + KettleJDK版本:1.8.0_91javassist依赖版本:javassit-3.12.1.GA [障碍再现 ...

  10. centos7 打造基于python语言Selenium2自动化开发环境

    1. 准备 安装模块 # yum groupinstall "Development tools" # yum install zlib-devel bzip2-devel ope ...