如何实现这个效果，鼠标悬浮一张图片上面，左边就显示浏览上一页，右边就显示浏览下一页

你都有地址了，把地址的代码拿下来参考即可，它是用js计算的，没有覆盖div<a href="http://news.ifeng.com/photo/yizhousaojietu/detail_2011_12/25/11555699_0.shtml" id="bigLink" style="cursor: url(http://img.ifeng.com/tres/TemplateRes/left.cur), auto; "><img onmousemove="imageonmousemove(event)" id="bigImage" src="http://res.news.ifeng.com/b52d6dcee929704a/2011/1218/rdn_4eed27916c965.jpg" width="950" height="600" alt="一周扫街图2011.12.11-12.17 " title="&lt;&lt;点击浏览上一张"></a>
<script>
  prevLink = "http://news.ifeng.com/photo/yizhousaojietu/detail_2011_12/25/11555699_0.shtml";
  nextLink = "http://news.ifeng.com/photo/yizhousaojietu/detail_2011_12/18/11399277_1.shtml"; function $(id){return document.getElementById(id);} function getpos(element) {
    if (arguments.length != 1 || element == null) {
      return null;
    }
    var elmt = element;
    var offsetTop = elmt.offsetTop;
    var offsetLeft = elmt.offsetLeft;
    var offsetWidth = elmt.offsetWidth;
    var offsetHeight = elmt.offsetHeight;
    while (elmt = elmt.offsetParent) {
      if (elmt.style.position == 'absolute' || (elmt.style.overflow != 'visible' && elmt.style.overflow != '')) {
        break;
      }
      offsetTop += elmt.offsetTop;
      offsetLeft += elmt.offsetLeft;
    }
    return {
      top: offsetTop,
      left: offsetLeft,
      right: offsetWidth + offsetLeft,
      bottom: offsetHeight + offsetTop
    };
  }  function imageonmousemove(evnt) {
    var photopos = getpos($("bigImage"));
    if (evnt) {
      nx = (parseInt(evnt.clientX) - photopos.left) / $("bigImage").width;
if (nx > 0.5 && nextLink != "") {
        if($("bigLink").style.cursor.toString().indexOf("left")!=-1||!$("bigLink").style.cursor){
$("bigLink").style.cursor = "url(http://img.ifeng.com/tres/TemplateRes/right.cur),auto";
}
        $("bigImage").title = "点击浏览下一张>>";
        $("bigLink").href = nextLink;
      }
      if (nx <= 0.5 && prevLink != "") {
        if($("bigLink").style.cursor.toString().indexOf("right")!=-1||!$("bigLink").style.cursor){
$("bigLink").style.cursor = "url(http://img.ifeng.com/tres/TemplateRes/left.cur),auto";
}
        $("bigImage").title = "<<点击浏览上一张";
        $("bigLink").href = prevLink;
      }
    }
  }</script>

解决方案 »

  1.   

    用onmouseover事件传递鼠标位置参数（event.x,event.y），根据鼠标位置判断显示上一页还是下一页，很简单
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>图片左右分别链接</title>
    </head>
    <style type="text/css">
    #pic{ margin:0 auto; text-align:center; position:relative; width:800px; height:600px;}
    #left{ left:0; width:400px; height:600px; position:absolute;}
    #right{right:0; width:400px; height:600px; position:absolute;}
    </style>
    <body>
    <div id="pic">
    <a href="#" id="left"></a>
    <a href="#" id="right"></a>
    <img src="images/Winter.jpg" width="800" height="600">
    </div>
    <script type="text/javascript">
        function imgLink(){
    var divBox = document.getElementById("pic");
    var getLeft = document.getElementById("left");
    var getRight = document.getElementById("right")
    var divPic = divBox.getElementsByTagName("img")[0];
    var picW = divPic.getAttribute("width");
    var picH = divPic.getAttribute("height");
    if(picW==null&&picH==null){
    alert("图片默认尺寸未填写！");
    return false;
    }
    //getLeft.style.setAttribute("width",Math.floor(picW/2)+"px");
    getLeft.style.width = getRight.style.width = Math.floor(picW/2)+"px";
    getLeft.style.height = getRight.style.height = picH+"px";
    divBox.style.width = picW + "px";
    getLeft.setAttribute("href","http://www.baidu.com")
    getRight.setAttribute("href","http://www.sina.com.cn")

    }
    window.onload = imgLink();
    </script>
    </body>
    </html>
      

  3.   

    四楼是傻逼.
    我一看就知道二楼是正确的.并且实现了一下,OK了 ,正确了,实现了
    演示网址
    http://www.wenyifan.net/images/details/25.html