css图像映射

来源：互联网发布：淘宝看访客来源编辑：程序博客网时间：2024/05/23 10:27

CSS图像映射

html代码

<div class="imgmap"><img src="img/nerdcore.jpg" width="333" height="500" alt="some of the clearleft team"><ul><li class="r"><a href="#" title="r">r</a></li><li class="s"><a href="#" title="s">s</a></li><li class="c"><a href="#" title="c">c</a></li><li class="j"><a href="#" title="j">j</a></li><li class="p"><a href="p" title="r">p</a></li></ul></div>

css代码

<style type="text/css">.imgmap{width:333px;height:500;position:relative;}.imgmap ul{padding:0px;margin:0px;list-style:none;}/*对链接进行绝对定位*/.imgmap a{position:absolute;display: block;width:50px;height:60px;text-indent:-1000em;}/*将各个链接定位到相应的人身上*/.imgmap .r a{top:50px;left: 80px;}.imgmap .s a{top:90px;left: 200px;}.imgmap .c a{top:140px;left: 55px;}.imgmap .j a{top:140px;left: 145px;}.imgmap .p a{top:165px;left: 245px;}/*为了创建翻转效果 将一个白色的实线边框应用于鼠标悬停时的链接*/.imgmap a:hover,.imgmap a:focus{border:1px solid #fff;}/*解决IE浏览器白色边框不显示的问题（给锚链接添加透明的背景 或无效的图像地址）*/.imgmap a{position:absolute;display: block;background-image: url(img/shim.gif);width:60px;height:80px;text-indent:-1000em;} </style>

运行结果

当鼠标未悬停在图片上时

当鼠标悬停在人像上时

flickr风格的图像映射

html代码

<div class="imgmap"><img src="img/nerdcore.jpg" width="333" height="500" alt="some of the clearleft team"><ul><li class="r"><a href="#" title="r"><span class="outer"><span class="inner"><span class="note">r</span></span></span></a></li><li class="s"><a href="#" title="s"><span class="outer"><span class="inner"><span class="note">s</span></span></span></a></li><li class="c"><a href="#" title="c"><span class="outer"><span class="inner"><span class="note">c</span></span></span></a></li><li class="j"><a href="#" title="j"><span class="outer"><span class="inner"><span class="note">j</span></span></span></a></li><li class="p"><a href="#" title="r"><span class="outer"><span class="inner"><span class="note">r</span></span></span></a></li></ul></div>

css代码

<style type="text/css">.imgmap{width:333px;height:500;position:relative;}.imgmap ul{padding:0px;margin:0px;list-style:none;}/*对链接进行绝对定位*/.imgmap a{position:absolute;display: block;background-image: url(img/shim.gif);color:#000;text-decoration: none;border: 1px solid transparent;}.img a .outer{display: block;border:1px solid transparent;}.imgmap a .inner{display: block;width:50px;height:60px;border:1px solid transparent;}/*将各个链接定位到相应的人身上*/.imgmap .r a{top:50px;left: 80px;}.imgmap .s a{top:90px;left: 200px;}.imgmap .c a{top:140px;left: 55px;}.imgmap .j a{top:140px;left: 145px;}.imgmap .p a{top:165px;left: 245px;}/*为了创建翻转效果 将一个白色的实线边框应用于鼠标悬停时的链接*/.imgmap a:hover,.imgmap a:focus{border-color:#d4d82d;}.imgmap a .note{position:absolute;bottom:-30px;width:70px;padding:3px 5px;background-color:#ffc;text-align:center;/*使说明部分在热点下面水平居中，而不是对准左边 将说明span的左边缘定位到热点的中点 接下来使用负的外边距值将说明span向左移动说明部分宽度的一半*//*left:25px;*/margin-left:-40px;/*将文本隐藏到屏幕左边之外 并且在鼠标悬停时对它重新定位*/left:-100000px;}

运行结果：

当鼠标悬停在人像上时

0 0