DIV CSS 佈局教程網

最近HoverTreeTop項目增加了圖片浏覽功能，每個頁面顯示一張圖片，提供上下頁鏈接，同時為了方便操作，也增加了點擊圖片訪問上下頁功能，使用javascript實現，當鼠標在圖片上移動時，如果在圖片的右半邊，就顯示向右箭頭，點擊訪問下一頁，如果是在圖片的左半邊，則顯示向左箭頭，點擊訪問上一頁。支持Chrome，火狐，Edeg，IE等浏覽器。

體驗效果：
http://hovertree.com/top/htimg/vhonho/4c42166934eacc92.htm

點擊進去後，把光標在圖片上移動，就會出現向左或者向右的箭頭。

效果圖如下：


代碼如下：

<div id="hewenqiArticle">
            <h2>好後悔，上學時怎麼沒追她呢</h2>
            <img id='hovertreePicture' src='http://hovertree.com/top/htpic/vhonho/4c42166934eacc92.jpg'/>
            <div id="htprenext">
                <ul class="pager">
                    <li class="previous"><a href='http://hovertree.com/top/htimg/vhonho/6fbe78611c103afb.htm' id='htPre'>&larr; 上一頁</a></li>
                    <li class="next"><a href='http://hovertree.com/top/htimg/vhonho/5431d20f23a2aec4.htm' id='htNext'>下一頁 &rarr;</a></li>
                </ul>
            </div>
        </div>
<script>
        var h_nextLink = document.getElementById("htNext"), h_preLink = document.getElementById("htPre");
var h_nexturl = "", h_preurl = "";
if (h_nextLink != null) {
    h_nexturl = h_nextLink.getAttribute("href");
}
if (h_preLink != null) {
    h_preurl = h_preLink.getAttribute("href");
}
var h_hwqImg=document.getElementById("hovertreePicture");
function hovertreePreNext(hwqImg,preUrl,nextUrl) {
    h_hwqImg.addEventListener("mousemove", function (event) {
        if (event.offsetX * 2 > this.width) {
            if (nextUrl != "") { this.style.cursor = 'url(http://hovertree.com/top/themes/img/arr_right.cur),auto'; }
            else { this.style.cursor = 'auto'; }
        }
        else {
            if (preUrl != "") { this.style.cursor = 'url(http://hovertree.com/top/themes/img/arr_left.cur),auto'; }
            else { this.style.cursor = 'auto'; }
        }
    })
    h_hwqImg.addEventListener("click", function (event) {
        if (event.offsetX * 2 > this.width) {
            if (h_nexturl != "") {
                location = nextUrl;
            }
        }
        else {
            if (preUrl != "") {
                location = preUrl;
            }
        }
    })
}
hovertreePreNext(h_hwqImg, h_preurl, h_nexturl);
    </script>

蓦然回首情已遠
身不由已在天邊
才明白愛恨情仇
最傷最痛是後悔