css实现热点（hotspot，地图提示）

最新推荐文章于 2024-04-01 22:18:16 发布
最新推荐文章于 2024-04-01 22:18:16 发布
阅读量4.9k 收藏
点赞数
分类专栏： CSS 文章标签： css border office class xhtml kill

from ： http://bbs.blueidea.com/viewthread.php?tid=2723547

讲得相当深刻。




BLOG地址： http://www.planabc.net/

地图弹窗（map pop）具体演示

 提示：您可以先修改部分代码再运行
这个实例，基本上是应用hover来实现隐藏/显示效果。

实例初始部分内容被隐藏，当hover时让其隐藏的内容显示。对于初始的隐藏我们可以通过，对父元素设置相对位置（position : relative;），对其要隐藏的子元素设置绝对位置（position : absolute;），然后对要隐藏的子元素设置margin属性，并给于无限大负值让其移动无限远隐藏，而当hover触发时，通过对隐藏的子元素重新 设置margin值让其显示。对于图片中变化的部分我们可以通过hover时背景图的变化来实现。

首先我们要准备好分析用的图片，如下总共7张，或许有人要问，为什么背景触发的图片使用一张，而不使用5张。其实部分原因大家应该可以看出，就是以后维护 的方便，修改一张图总比修改5张图片来的方便，其次使用5张图浏览器需要加载5次，而使用1张图浏览器只需要加载一次就行了。那或许有朋友要问了，那我把 2张背景图放在一张上可以吗？按照你上面的理论，不是更方便吗？是的，放一张上从逻辑上是可以的，但有时候还要考虑到图片的大小和图片加载的速度。









首先我们要显示5部分内容，内容结构相似，我们可以选用无序列表来显示介绍的图片和内容：
复制内容到剪贴板
代码:
<ul>
  <li><a id="map01" href="#map01"><img src="http://v1.planabc.net/demo/images/map1.jpg" alt="Post Office" />This is the Popsville community <strong>Post Office</strong>, your home of over-priced postage. Click map for more</a></li>
  <li><a id="map02" href="#map02"><img src="http://v1.planabc.net/demo/images/map2.jpg" alt="Dew Drop Inn" />Home is where the beer is. And that means the <strong>Dew Drop Inn</strong>. Live music on the weekends. Click map for more</a></li>
  <li><a id="map03" href="#map03"><img src="http://v1.planabc.net/demo/images/map3.jpg" alt="River Beach" />Spend lazy summer afternoons at the beautiful <strong>River Beach</strong>. Hang out on the nude beach. Click map for more</a></li>
  <li><a id="map04" href="#map04"><img src="http://v1.planabc.net/demo/images/map4.jpg" alt="Woodland Traders" />Our local <strong>Woodland Traders</strong> is a veritable Mecca of consumer goods and hardware. Click map for more</a></li>
  <li><a id="map05" href="#map05"><img src="http://v1.planabc.net/demo/images/map5.jpg" alt="Wild Game Diner" />Country living means road kill, and the <strong>Wild Game Diner</strong> prepares it with special sauce. Click map for more</a></li>
</ul>
对于a中的内容我们进行隐藏，我们考虑增加span元素来实现，代码修改如下：
复制内容到剪贴板
代码:
<ul>
  <li><a id="map01" href="#map01"><span class="offset"><img src="http://v1.planabc.net/demo/images/map1.jpg" alt="Post Office" />This is the Popsville community <strong>Post Office</strong>, your home of over-priced postage. Click map for more</span></a></li>
  <li><a id="map02" href="#map02"><span class="offset"><img src="http://v1.planabc.net/demo/images/map2.jpg" alt="Dew Drop Inn" />Home is where the beer is. And that means the <strong>Dew Drop Inn</strong>. Live music on the weekends. Click map for more</span></a></li>
  <li><a id="map03" href="#map03"><span class="offset"><img src="http://v1.planabc.net/demo/images/map3.jpg" alt="River Beach" />Spend lazy summer afternoons at the beautiful <strong>River Beach</strong>. Hang out on the nude beach. Click map for more</span></a></li>
  <li><a id="map04" href="#map04"><span class="offset"><img src="http://v1.planabc.net/demo/images/map4.jpg" alt="Woodland Traders" />Our local <strong>Woodland Traders</strong> is a veritable Mecca of consumer goods and hardware. Click map for more</span></a></li>
  <li><a id="map05" href="#map05"><span class="offset"><img src="http://v1.planabc.net/demo/images/map5.jpg" alt="Wild Game Diner" />Country living means road kill, and the <strong>Wild Game Diner</strong> prepares it with special sauce. Click map for more</span></a></li>
</ul>
在显示的时候文字会跟着图片排版，为了方便我们对其中的描述文字进行样式调整而不影响图片的布局，我们单独给描述文字增加span元素，代码修改如下：
复制内容到剪贴板
代码:
<ul>
  <li><a id="map01" href="#map01"><span class="offset"><img src="http://v1.planabc.net/demo/images/map1.jpg" alt="Post Office" /><span>This is the Popsville community <strong>Post Office</strong>, your home of over-priced postage. Click map for more</span></span></a></li>
  <li><a id="map02" href="#map02"><span class="offset"><img src="http://v1.planabc.net/demo/images/map2.jpg" alt="Dew Drop Inn" /><span>Home is where the beer is. And that means the <strong>Dew Drop Inn</strong>. Live music on the weekends. Click map for more</span></span></a></li>
  <li><a id="map03" href="#map03"><span class="offset"><img src="http://v1.planabc.net/demo/images/map3.jpg" alt="River Beach" /><span>Spend lazy summer afternoons at the beautiful <strong>River Beach</strong>. Hang out on the nude beach. Click map for more</span></span></a></li>
  <li><a id="map04" href="#map04"><span class="offset"><img src="http://v1.planabc.net/demo/images/map4.jpg" alt="Woodland Traders" /><span>Our local <strong>Woodland Traders</strong> is a veritable Mecca of consumer goods and hardware. Click map for more</span></span></a></li>
  <li><a id="map05" href="#map05"><span class="offset"><img src="http://v1.planabc.net/demo/images/map5.jpg" alt="Wild Game Diner" /><span>Country living means road kill, and the <strong>Wild Game Diner</strong> prepares it with special sauce. Click map for more</span></span></a></li>
</ul>
XHTML部分我们已经写好，下面将是我们对其表现的设计部分，即CSS部分。

首先我们清除一下元素默认的边距（内边距和外边距）和设置img的默认边框为0：
复制内容到剪贴板
代码:
* {
   margin:0;
   padding:0;
}
img {
   border:0;
}
我们定义下ul的样式，包括ul的预设标记，大小，高度，边框：
复制内容到剪贴板
代码:
ul {
  list-style-type:none;
  background: transparent url(http://v1.planabc.net/demo/images/map_flat.jpg) no-repeat 0 0;
  width:350px;
  height:250px;
  border:1px solid #000;
}
对于li的显示方式设置内联（display: inline;）行布局：
复制内容到剪贴板
代码:
ul li {
  display:inline;
}
下面是我们讲解的重点，隐藏/显示效果。

对li中的a元素我们设置其块元素显示（display: block;），让其相对位置（position: relative;），并使链接不显示下划线。
复制内容到剪贴板
代码:
ul li a {
  position:relative;
  display:block;
  text-decoration:none;
}
让类选择器为offset的span隐藏，至于怎样隐藏文章开头已经分析了：
复制内容到剪贴板
代码:
ul li a span.offset {
  position:absolute;
  margin-top:-9000px;
  margin-left:-9000px;
}
如上已经实现了内容隐藏，现在我们制作考虑触发显示的效果：
复制内容到剪贴板
代码:
ul li a:hover span.offset, ul li a:focus span.offset, ul li a:active span.offset {
  color: #000;
  background-image:none;
  background-color:#ffffde;
  border:1px solid #000;
  display:block;
  width:150px;
  height:auto;
  text-decoration:none;
  cursor:pointer;
}
我们再来对span中的文字描述进行样式修饰，因为span开始是被隐藏的，所以设置只需在触发的情况下设置就可以了：
复制内容到剪贴板
代码:
ul li a:hover span.offset span, ul li a:focus span.offset span, ul li a:active span.offset span {
  display:block;
  width:140px;
  height:120px;
  margin:5px;
}
隐藏显示效果我们是达到了，但具体的map触发范围，定位，还有背景的变换我们还没实现，继续往下探讨，仅以map01为例，其他雷同。

设置map01的宽度和高度，以及外边距位置：
复制内容到剪贴板
代码:
ul li a#map01 {
  width:80px;
  height:60px;
  margin-top:0;
  margin-left:130px;
}
当触发时改变其背景图片（图片的位置注意和map01的外边距margin位置相对应）：
复制内容到剪贴板
代码:
ul li a#map01:hover, ul li a#map01:focus, ul#cmp li a#map01:active {
  background:transparent url(http://v1.planabc.net/demo/images/map_flat_on.jpg) no-repeat -130px 0px;
}
设 置触发后描述部分的位置，开始我们对于a元素设置了1px的边框，那么要让map01中的描述显示在右侧，并且和a元素的位置top相同，则要让类选择器 为offset的span上移1px（我们通过margin-top的负值来实现），设置描述部分的外左边距，刚才我们设置了map01的外左边距为 130px（ul的总宽为350px），那我们可以设置描述部分的外边距大于220px（350px-130px）。
复制内容到剪贴板
代码:
ul li a#map01:hover span.offset, ul li a#map01:focus span.offset, ul li a#map01:active span.offset {
  margin-top:-1px;
  margin-left:230px;
}
根据上面map01的设置方法来设置map02/map03/map04/map05，如下：
复制内容到剪贴板
代码:
ul li a#map02 {
  width:110px;
  height:75px;
  margin-top:-50px;
  margin-left:235px;
}
ul li a#map02:hover, ul li a#map02:focus, ul li a#map02:active {
  background:transparent url(http://v1.planabc.net/demo/images/map_flat_on.jpg) no-repeat -235px -10px;
}
ul li a#map02:hover span.offset, ul li a#map02:focus span.offset, ul li a#map02:active span.offset {
  margin-top:-11px;
  margin-left:125px;
}
ul li a#map03 {
  width:75px;
  height:95px;
  margin-top:3px;
  margin-left:115px;
}
ul li a#map03:hover, ul li a#map03:focus, ul li a#map03:active {
  background:transparent url(http://v1.planabc.net/demo/images/map_flat_on.jpg) no-repeat -115px -88px;
}
ul li a#map03:hover span.offset, ul li a#map03:focus span.offset,ul li a#map03:active span.offset {
  margin-top:-89px;
  margin-left:245px;
}
ul li a#map04 {
  width:110px;
  height:120px;
  margin-top:-60px;
  margin-left:5px;
}
ul li a#map04:hover, ul li a#map04:focus, ul li a#map04:active {
  background:transparent url(http://v1.planabc.net/demo/images/map_flat_on.jpg) no-repeat -5px -123px;
}
ul li a#map04:hover span.offset, ul li a#map04:focus span.offset, ul li a#map04:active span.offset {
  margin-top:-124px;
  margin-left:355px;
}
ul li a#map05 {
  width:95px;
  height:97px;
  margin-top:-90px;
  margin-left:240px;
}
ul li a#map05:hover, ul li a#map05:focus, ul li a#map05:active {
  background:transparent url(http://v1.planabc.net/demo/images/map_flat_on.jpg) no-repeat -240px -153px;
}
ul li a#map05:hover span.offset, ul li a#map05:focus span.offset, ul li a#map05:active span.offset {
  margin-top:-154px;
  margin-left:120px;
}
可能有某些朋友看上面的map代码的位置有些糊涂了，下面几点或许有助于朋友们理解：
1、li元素设置为了内联行布局；
2、当一个li和另外一个li的大小超过ul的大小时，另一个li将换行显示。

再看下整体效果：

 提示：您可以先修改部分代码再运行
对于隐藏/显示，还可以通过定义了绝对位置的子元素left负值无限远，并物理隐藏（visibility:hidden）或者通过改变display属性来实现。有兴趣的朋友可以尝试一下用上面的两种思路来实现。就当作为这堂课的作业！
yethyeth
关注
专栏目录
css简单实现热点链接
zyl_lyr1019的专栏
11-04 2462
类似热点链接的一段小代码：利用定位实现。 这个好像是没有什么可多说的。 看过定位这个概念的，都能理解。 *{margin:0px;padding:0px;} body{text-align:center;} .body{width:200px;height:auto;position:relative;text-align:left;margin:0 auto;} .ourIm
CSS+JS 图像热点点击提示
09-28
图像热点提示功能实例，亲测，可以点击提示图片信息。
CSS案例之热点图
weixin_45336716的博客
09-02 214
源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit..
用css写一个数据热点效果
qq_48445738的博客
10-31 283
效果如下： 分析 1.这里看到的大概有三个圈 围着点在做放大动画 所以我们写四个盒子 点+3个圈 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t
css热点图动画
6747的博客
08-02 213
css热点图动画
jQuery实现鼠标经过提示信息的地图热点效果
10-24
知识点一：jQuery库的应用 jQuery是一个快速、小巧、功能丰富的JavaScript库。...通过合理使用jQuery提供的丰富API以及对CSS样式的灵活运用，可以在各种浏览器中实现一致且具有良好用户体验的地图热点提示效果。
jquery开发的地图热点特效当鼠标经过提示相应信息.zip
11-18
本项目“jquery开发的地图热点特效当鼠标经过提示相应信息.zip”是利用jQuery来实现一种地图上的热点效果，即当用户鼠标悬停在特定区域时，会显示与该区域相关的信息提示。 地图热点技术常用于地理信息系统（GIS）...
鼠标移动到地图的热点区域时突出显示热点区域的源码
06-04
总的来说，这个项目通过JavaScript实现了地图热点的交互功能，当鼠标移到热点区域时，会高亮显示并提供相关提示，提升了用户在地图上的探索体验。这种技术广泛应用于各种在线地图服务、地理数据分析和导航应用中。
jquery热点提示工具插件
07-20
这种热点提示功能常见于地图应用、图片展示以及各种需要对特定元素进行解释说明的场景。 要使用这个插件，首先要确保你的项目已经引入了jQuery库。然后，可以通过下载或在线引用的方式获取该插件的JavaScript和CSS...
css高级技术_css精灵_锚点链接_热点链接_模板_Unit_10;
qq_38053395的博客
07-26 602
Topic 1 . css精灵 就是图片整合技术，就是将一系列小图整合到一张大图之上 又称之为：CSS雪碧、CSS sprite 大图称之为精灵图或雪碧图 核心技术：背景图定位 一般我们看到背景图的定位是负数的话那么一般就是使用的精灵图； 背景图的单个属性如下 ： 背景图定位：background-position 背景色：background-color 背景图：backgro...
css简单实现热点链接当鼠标悬停时出现白色的框
09-25
类似热点链接的一段小代码：利用定位实现，看过定位这个概念的，都能理解。实现的效果就是当鼠标悬停到MM字样时，图片中就会出现一个白色的框，喜欢的朋友可以了解下
CSS自定义图片热区示例
03-09
CSS自定义图片热区示例代码，直接在HTML里，查看代码
html+css动画-大数据热点图
最新发布
m0_68467925的博客
04-01 418
蓝色的圆圈能持续不断的波动。
css动画制作热点图（15）
weixin_45147894的博客
06-25 344
精通css 第六章 (2)图片热点定位
qq_34664510的博客
08-10 1084
flickr风格图像映射效果<style> .imgmap{ width:333px ;/*等于大图片尺寸*/ height: 500px; position: relative; } .imgmap ul{ margin:0; padding: 0; list-style: no
CSS3动画-热点图案例
WangZhang_521的博客
01-12 311
CSS3动画-热点图案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
指定图片某块区域加超链接 (热点)
热门推荐
flqbestboy的专栏
08-02 2万+
使用map标签可以给指定图片某块区域加超链接 使用方法： 1.为map标签首先加上一个id属性来为map标签定义一个唯一的名称 2.为了保证兼容性再加上name属性，属性值和id的值相同 注：img中的usemap属性可引用map中的id或name属性（由浏览器决定）所以需要添加id和name两个属性 3.为map标签所作用的图片加上usemap属性，属性值为#id(map标签的id值或
css3热点图动画
XIAOERDS的博客
06-16 205
<style> .dd { position: relative; width: 600px; height: 500px; background-color:pink; } .city { position: absolute; top: 300px; .
热点图（CSS3）
weixin_45773503的博客
03-18 323
热点图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值