CSSでイメージに注釈

• 生ゴミ
  
• 燃えるゴミ
  
• 資源ゴミ
  

＜参考サイト＞
Annotating images with CSS

*スタイルシート

<style type="text/css"> <!-- #photo { display: block; position: relative; width: 380px; height: 268px; margin: 0; padding: 0; } #photo li { visibility: hidden; list-style-type: none; position: absolute; border: 1px solid #000; background:url(http://lomo.sakura.ne.jp/blog/archives/images/back1.gif); font-family: sans-serif; font-size: 14px; color: #cc0000; padding: 0; overflow: hidden; } #photo span { visibility: hidden; position: absolute; left: 0; right: 0; padding: 5px; display: block; } #photo:hover li { visibility: visible; } #photo li:hover { background: transparent; border-color: #fff; } #photo li:hover span {visibility: visible;} #trash1 { left: 130px; top: 65px; width: 50px; height: 100px; } #trash2 { left: 185px; top: 70px; width: 50px; height: 110px;} #trash3{ left: 240px; top: 75px; width: 60px; height: 120px;} --> </style>

*html

<div id="photo"> <img src="http://lomo.sakura.ne.jp/blog/archives/images/trash_box.jpg" alt="ゴミ箱" width="380" height="268"> <ul> <li id="trash1"><span><strong>生ゴミ</strong><br /></span></li> <li id="trash2"><span><strong>燃えるゴミ</strong><br /></span></li> <li id="trash3"><span><strong>資源ゴミ</strong><br /></span></li> </ul> </div>

リンクを貼ることもできるのでイメージマップにもなります。
でも結構大変…