iPictrue是一款基于jQuery，能在圖片上的任意位置標注提示信息的插件，使用iPictrue可以讓圖片內容更豐富，提高互動性，適用于一些需要注釋圖片信息的應用如產品結構圖等，它還支持圖片、鏈接等html內容。

?

HTML

首先在頁面中加入jquery庫以及iPicture插件，以及css樣式文件。

        <link rel="stylesheet" type="text/css" href="css/iPicture.css"/> 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="js/jquery.ipicture.js"></script> 
      

?

然后在頁面中按如下格式加入圖片和提示信息。

        <div id="iPicture" data-interaction="hover"> 
      <div class="ip_slide"> 
        <img class="ip_tooltipImg" src="images/mypic.jpg"> 
        <div class="ip_tooltip ip_img32" style="top: 330px; left: 418px;" 
 data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="btt-slide"> 
              <p><b>游艇</b><br/>鏈接到：<a >Helloweba.com</a></p> 
        </div> 
        ....多個標注重復div class="ip_tooltip ip_img32"... 
     </div> 
</div> 
      

?

代碼中，img.ip_tooltipImg是大圖，也就是要標注提示的圖片，div.ip_tooltip是提示信息，使用style的top和 left來控制標注信息的相對位置，其他幾個屬性：data-tooltipbg是背景樣式，data-round是標注點的樣式，data- animationtype是提示信息的位置，如btt-slide意思是從下(bottom)到(top)動畫顯示提示信息，其他類推。在頁面中我們使 用了html5的data-*自定義特性，并且在iPicture.css文件中使用了css3的方法，所以要想看到demo的真正效果建議使用現代瀏覽 器。

?

jQuery

直接一句話調用iPicture插件。

        <script type="text/javascript"> 
$( "#iPicture" ).iPicture(); 
</script> 
      

?

就是這么簡單，當鼠標滑動到圖片上的閃爍的圓圈時，你會發現旁邊會有提示框出現。當然你也可以修改css樣式來符合你的應用外觀，demo只是一個 簡單的展示，你也可以進行功能擴展，比如點擊圖片中的某個位置，可以輸入標注信息，然后將位置和提示信息記錄到數據庫，就如同地圖標注一樣了。

?

PS：如果你想兼容老式瀏覽器的話，你可以參照iPicture的老版本： http://ipicture.justmybit.com/