原文地址:http://frankmanno.com/ideas/css-imagemap-redux/ 1.先说说图像地图是什么? 就是在一张图片上标记出有url的地方,当鼠标滑过的时候,给以像links这样的代码显示的 效果。 2.查看实例 Example 1 Example 2 3.方法 这是xhtml:
分析这段代码是必要的,因为他是结构,效果肯定是通过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: absolute; font-size: 85%; display: none; }/*这个url的介绍,不用显示*/ dd{ margin: 0; padding: 0; position: absolute; font-size: 85%; }/*定义绝对定位*/ 3.)#monitorDef的定义,a:hover效果 dd#monitorDef{ top: 65px; left: 114px; }/*定义位置*/ dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; } dd#monitorDef a span{ display: none; } dd#monitorDef a:hover{ position: absolute; 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: absolute; border: 1px solid #BCBCBC; bottom: 100%; margin: 0; padding: 5px; width: 250%; }/*这里不需要解释*/ 5.原作者认为,这个模型不是ideal(理想的),因为可能背景图片太费事,第二个模型是根据png图片透明原理(FireFox下) CSS改进如下: dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; background: transparent url(note.png) repeat;} dd#monitorDef a:hover{ position: absolute; 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,这个再研究,我也不太明白! |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-30 15:32 , Processed in 0.110043 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.