圖像映射使我們可以將圖像的一些區域指定為熱點。下面我們來看看圖像映射的xHtml和CSS代碼：
xHtml:
<div id="pic">
<img src="img.jpg" width="600" height="450" alt="img" />
<ul>
<li class="avirl"><a href="#" title="avirl"><span class="outer"><span class="inner"><span class="note">Avirl</span></span></span></a></li>
<li class="guitar"><a href="#" title="guitar"><span class="outer"><span class="inner"><span class="note">Guitar</span></span></span></a></li>
<li class="mike"><a href="#" title="mike"><span class="outer"><span class="inner"><span class="note">Mike</span></span></span></a></li>
</ul>
</div>
CSS:
#pic{
width:600px;
height:450px;
position:relative;/*對它包含的連接可以相對div進行絕對定位*/
}
#pic ul{
margin:0;
padding:0;
list-style:none;
}
#pic a{
position:absolute;
width:100px;
height:120px;
color:#000;
text-decoration:none;
border:1px solid transparent;/*設置透明邊框，避免鼠標停留時的移動*/
}
#pic .avirl a{
top:15px;
left:95px;
}
#pic .guitar a{
top:115px;
left:280px;
}
#pic .mike a{
top:250px;
left:425px;
}
#pic a:hover{
border:#d4d82d;
}
#pic a .outer{
display:block;
width:98px;
height:118px;
border:1px solid #000;
}
#pic a .inner{
display:block;
width:96px;
height:116px;
border:1px solid #fff;
}
#pic a .note{
position:absolute;
bottom:-3em;
width:9em;
padding:0.2em 0.5em;
background-color:#ffc;
text-align:center;
left:-30000px;/*將文本隱藏到屏幕左邊之外*/
margin-left:-5em;/*設置提示框在熱點區域下水平居中*/
}
#pic a:hover .note{
left:50px;/*顯示文本內容*/
}
#pic:hover a .outer,#pic a:hover .outer{/*IE6只支持錨鏈接上的鼠標停留*/
border:1px solid #000;
}
#pic:hover a .inner,#pic a:hover .inner{
border:1px solid #fff;
}
OK啦~~~效果搞定了！