Code

图片文字说明提示效果。
一个jquery的图片文字说明提示效果。鼠标经过图片,提示图片的title信息。
效果预览




所用背景图(右击另存为):
代码
1.在body里加入如下HTML代码:

<div id="imgBox">
    <img src="images/img1.jpg" title="图片一提示内容。" />
    <img src="images/img2.jpg" title="图片二提示内容。" />
    <img src="images/img3.jpg" title="图片三提示内容。" />
    <img src="images/img4.jpg" title="图片四提示内容。" />
</div>

2.在head标签内加入css文件:

<style type="text/css">
    .tooltip {
        display:none;
        background:url(tipbg.png);
        _background:none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="tipbg.png" ,sizingMethod="crop");
        font-size:12px;
        height:70px;
        width:160px;
        padding:25px;
        color:#fff;
        text-align:left;
        line-height:16px;
    }
</style>

3.在head里引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquerytoolstip.js" type="text/javascript"></script>

4.继续在head里加入js代码:

<!--横向滚动的js-->
<script type="text/javascript">
    $(function() {
        $("#imgBox img[title]").tooltip();
    })
</script>