CSSImageMaps—图像地图

1.先说说图像地图是什么？

就是在一张图片上标记出有url的地方，当鼠标滑过的时候，给以像<a href="url" title="description words">links</a>这样的代码显示的 效果。

2.查看实例

Example 1 Example 2

3.方法

这是xhtml:

<dl id="officeMap"> <dt id="monitor">1. Monitor</dt> <dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor. I wish I had an LCD!</span></a></dd> </dl>

分析这段代码是必要的，因为他是结构，效果肯定是通过a标签的:hover,以及:hover span的定义实现的，怎样具体去实现效果呢?

1.)需要一张图片，那就给#officeMap一个背景图片office.jpg

dl#officeMap{ margin: 0; padding: 0; background: transparent url(office.jpg) top left no-repeat; height: 262px; width: 350px; position: relative; }

定义内部元素相对定位，不然怎样给map定位位置?

2.)下来是dt dd标签

dt{ margin: 0; padding: 0; position: static; font-size: 85%; display: none; }/*这个url的介绍，不用显示*/ dd{ margin: 0; padding: 0; position: static; font-size: 85%; }/*定义绝对定位*/

3.)#monitorDef的定义,a:hover效果

dd#monitorDef{ top: 65px; left: 114px; }/*定义位置*/ dd#monitorDef a{ position: static; width: 73px; height: 69px; text-decoration: none; } dd#monitorDef a span{ display: none; } dd#monitorDef a:hover{ position: static; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }/*背景图片滑动,参考滑动门技术(原理相似)，span内容的定位*/

4.)下来是重点,span这个主要效果是怎么实现的?

dd#monitorDef a:hover span{ display: block; text-indent: 0; vertical-align: top; color: #000; background-color: #F4F4F4; font-weight: bold; position: static; border: 1px solid #BCBCBC; bottom: 100%; margin: 0; padding: 5px; width: 250%; }/*这里不需要解释*/

5.原作者认为，这个模型不是ideal（理想的），因为可能背景图片太费事，第二个模型是根据png图片透明原理(FireFox下)

CSS改进如下：

dd#monitorDef a{ position: static; width: 73px; height: 69px; text-decoration: none; background: transparent url(note.png) repeat;} dd#monitorDef a:hover{ position: static; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; background: transparent url(hover.png) repeat;}

这样就避免了，制作office.jpg那样麻烦的图片了，只要给a标签 加上背景图片就能区别出map的位置，但是只有firefox支持怎么行，我们 熟悉的IE怎么办?

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hover.png',sizingMethod='scale');

作者是使用他来实现的，国内css研究者们已经翻译了这个技术

而我使用：filter:alpha(opacity=80);便解决了，都是CSS的filter，这个再研究，我也不太明白！

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

分享文章：CSSImageMaps—图像地图
当前链接：/news48/313448.html

成都网站建设公司_创新互联，为您提供网站营销、做网站、品牌网站制作、网站内链、ChatGPT、品牌网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联