制作图片热点
制作图片热点
以前经常用图片做一些链接，而那是用dw做的很简单，今天看到一本书，也学着做了一个。
书上那个绝对定位到图片上的区域，我不知道是怎么实现:hover显示边框的，按它的弄，ff正常，在ie下根本没效果。
简单地说，在ie下，一个a标签，定位到图片之上(我还设置了z-index)，block,width,height都有，但当鼠标移动到a标签的空白区域(非文字上)，并不执行:hover的效果。按理是不该出现这种情况的啊。
再把那个a标签设置个背景颜色，则上面的问题不再出现了，只是多了背景色。于是我便想到添加个滤镜，但不能把边框也透明掉啊，所以只得又添加一个<span>标签。
制作热点
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5 <title>热点制作</title>
6 </head>
7 <body>
8 <style type="text/css">
9 #mypic{ width:300px; height:400px; position:relative;}
10 #mypic ul{ margin:0px; padding:0px; list-style:none;}
11 #mypic a .hotpos{ position:absolute; width:50px; height:50px; border:1px solid transparent;}
12 #mypic .link1 a .hotpos{ top:60px; left:120px;}
13 #mypic .link2 a .hotpos{ top:130px; left:140px;}
14 #mypic .filter{ display:block; width:100%; height:100%; background-color:silver; filter: Alpha(opacity=0); opacity:0;}
15 #mypic a .hotcon{ position:absolute; width:50px; color:silver; text-decoration:none;}
16 #mypic .link1 a .hotcon{ bottom:-20px;}
17 #mypic .link2 a .hotcon{ bottom:-40px;}
18 #mypic a:hover span.hotpos{ border:1px solid #fff; cursor:pointer;}
19 #mypic a:hover span.hotcon{ color:#0066ff; cursor:pointer;}
20 </style>
21 <div id="mypic">
22 <img src="http://images.cnblogs.com/cnblogs_com/kingqueenyun/248083/o_1.jpg" width="300" height="400" title="示例图片" />
23 <ul>
24 <li class="link1"><a href="#" title="查看->link1"><span class="hotpos"><span class="filter"></span></span></span><span class="hotcon">link1</span></a></li>
25 <li class="link2"><a href="#" title="查看->link2"><span class="hotpos"><span class="filter"></span></span><span class="hotcon">link2</span></a></li>
26 </ul>
27 </div>
28 </body>
29 </html>
30
示例演示：
posted on 2010-05-28 20:55 kingQueenyun 阅读(758) 评论(0) 编辑 收藏 举报
