制作图片热点
制作圖片熱點(diǎn)
以前經(jīng)常用圖片做一些鏈接，而那是用dw做的很簡(jiǎn)單，今天看到一本書(shū)，也學(xué)著做了一個(gè)。
書(shū)上那個(gè)絕對(duì)定位到圖片上的區(qū)域，我不知道是怎么實(shí)現(xiàn):hover顯示邊框的，按它的弄，ff正常，在ie下根本沒(méi)效果。
簡(jiǎn)單地說(shuō)，在ie下，一個(gè)a標(biāo)簽，定位到圖片之上(我還設(shè)置了z-index)，block,width,height都有，但當(dāng)鼠標(biāo)移動(dòng)到a標(biāo)簽的空白區(qū)域(非文字上)，并不執(zhí)行:hover的效果。按理是不該出現(xiàn)這種情況的啊。
再把那個(gè)a標(biāo)簽設(shè)置個(gè)背景顏色，則上面的問(wèn)題不再出現(xiàn)了，只是多了背景色。于是我便想到添加個(gè)濾鏡，但不能把邊框也透明掉啊，所以只得又添加一個(gè)<span>標(biāo)簽。
?
制作熱點(diǎn) 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>熱點(diǎn)制作</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 ?
示例演示：
?
- link1
- link2
?
轉(zhuǎn)載于:https://www.cnblogs.com/kingqueenyun/archive/2010/05/28/1746636.html
總結(jié)
- 上一篇： 求一个好听的的名字。
- 下一篇： 一步步学会使用ASP.NET 4 WEB