效果體驗：http://hovertree.com/texiao/css/10.htm
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS為圖片標注 - 何問起</title><base target="_blank" />
<meta charset="utf-8" />
<link href="http://hovertree.com/texiao/css/10/tiphovertree.css" rel="stylesheet" type="text/css" />
<style>
a {
color: blue;
}
.hvtholder {
width: 789px;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="hvtholder">
<h2>CSS為圖片標注 何問起</h2>
<a href="http://hovertree.com/hvtart/bjae/51kt42r0.htm">原文</a> <a href="http://hovertree.com/menu/css/">CSS</a>
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a>
<br />請把光標移動到圖片中您所感興趣的地方。
</div>
<div style="height:450px; margin:5px auto;" class="tiphovertree">
<img src="http://hovertree.com/texiao/css/10/sunhovertree.jpg" height="450" width="960" />
<ul>
<li style="left:8px;top:137px;"><a title="太陽能熱水袋" href="http://hovertree.com/"><div></div></a></li>
<li style="left:408px;top:50px;"><a title="太陽能太陽傘" href="http://hovertree.com/texiao/html5/4.htm"><div></div></a></li>
<li style="left:705px;top:160px;"><a title="太陽能帳篷" href="http://hovertree.com/texiao/html5/4/f/"><div></div></a></li>
<li style="left:20px; bottom:8px;"><a title="太陽能手電筒" href="http://hovertree.com/hvtart/bjae/79mtsd1t.htm"><div></div></a></li>
<li style="left:108px; bottom:29px;"><a title="太陽能燈" href="http://hovertree.com/texiao/html5/"><div></div></a></li>
<li style="left:278px; bottom:48px;"><a title="太陽能背包" href="http://tool.hovertree.com/"><div></div></a></li>
<li style="left:458px; bottom:23px;"><a title="太陽能驅蚊器" href="http://hovertree.com/texiao/css/8.htm"><div></div></a></li>
<li style="left:639px; bottom:37px;"><a title="太陽能七彩罐" href="http://hovertree.com/texiao/html5/6.htm"><div></div></a></li>
</ul>
</div>
</body>
</html>
tiphovertree.css 文件代碼：
@charset "utf-8";
/* CSS Document */
body{background:url(bg.png) repeat;padding:0;margin:0;font-family:Verdana, Geneva, sans-serif;font-size:14px;}
p{padding:0;margin:0;}
/* tiphovertree */
.tiphovertree{position:relative;width:960px;}
.tiphovertree img{border:4px solid #fff;}
.tiphovertree ul{display:none;list-style-type:none;}
.tiphovertree:hover ul{display:block;}
.tiphovertree ul li{height:84px;position:absolute;width:84px;}
.tiphovertree ul li div{background:url(borders.png) repeat scroll 0 0 transparent;height:84px;width:84px;}
.tiphovertree ul li a:hover div{background:url(twoborders.png) repeat scroll 0 0 transparent;height:84px;width:84px;}