鼠标经过热区弹出图片问题

Question

存在一个问题，弹出的图片跟在鼠标旁边，当鼠标位置处于页面偏下时，显示的图片就有一半被屏幕挡住，只有拉滚动条才能看到，应该怎样让弹出的图片完全显示呢。。相关函数如下，十分感谢。。
 <script language="JavaScript" type="text/JavaScript">
function layer_show(layer_name){
 var zbx = event.clientX+document.documentElement.scrollLeft; //要显示div的x坐标（滚动条长度+鼠标位置坐标） 
 var zby = event.clientY+document.documentElement.scrollTop;//y坐标
 document.getElementById(layer_name).style.left = zbx+'px';//设div层要显示的位置
 document.getElementById(layer_name).style.top = zby+'px';
 document.getElementById(layer_name).style.visibility="visible";//让div显示 
}
function layer_hide(layer_name){
  document.getElementById(layer_name).style.visibility="hidden";//让div隐藏
}</script>

Answer 1

可以给你一个方案：显示图片前，先判断  图片的宽+鼠标x是否大于浏览器窗口的宽，图片的高+鼠标y是否大于浏览器窗口的高。如果大于就 坐标=浏览器-图片，否则坐标才是LZ你那样。

Answer 2

自己的，还有点缺陷。。<script language="JavaScript" type="text/JavaScript">
function layer_show(layer_name)
{
  document.getElementById(layer_name).style.visibility="visible";
  divWidth=document.getElementById(layer_name).clientWidth;//层宽
  divHeight=document.getElementById(layer_name).clientHeight;//层高
  
  var ckw = document.documentElement.clientWidth;
  var ckh = document.documentElement.clientHeight;//屏幕窗口高
  var x = event.clientX;
  var y = event.clientY;//Y坐标
  var imgw = document.getElementById(layer_name).offsetWidth;
  var imgh = document.getElementById(layer_name).offsetHeight;//图像高,注意换成自己的图片id
  if (x >= (ckw - imgw))
   {
    x = ckw - imgw;
}
  if (y >= (ckh - imgh))//判断纵坐标是否超出范围
   {
    y = ckh - imgh;
    }//如果坐标大于屏幕与图片高之差那么坐标就等于他俩的差
 // else{y=y+50;}
 document.getElementById(layer_name).style.left = (x+document.documentElement.scrollLeft)+'px';//设div层要显示的位置
 document.getElementById(layer_name).style.top = (y+document.documentElement.scrollTop)+"px";
 document.getElementById(layer_name).style.visibility="visible";//让div显示 （隐藏是none)
}function layer_hide(layer_name){
 document.getElementById(layer_name).style.visibility="hidden";//让div隐藏
}</script>

Answer 3

我之前写了一个所在位置，
就是说把页面分成四部分，
这样就可以避免你说的情况
function onMouseMove(){       
  if (!gDivMoveFlag)
    return ;
   var links = dataDiv.getElementsByTagName("a");
   for(var i = 0; i< links.length; i++)
   {
       links[i].onclick = function(){return false;};
   }
  if(IE==true)
    getCursor(event);
  else {  
    try {
     window.constructor.prototype.__defineGetter__("event", window_prototype_get_event);
    }catch(e) {}
  
    curX = event.pageX;
    curY = event.pageY; 
  }
  dataDiv.style.left = (curX-gCurWidth) + "px";
  dataDiv.style.top = (curY-gCurHeight) + "px";
}function setOffsets() {
if (gDisplayFlag)
     return;
        curX = innerObj.offsetLeft ;
    //返回相对于当前用户点击位置那一块面积最大，弹出框就显示在那里0:左上1：右上2：左下3：右下
   // alert(summary.length+"长度图片"+firstimg);
   if(summary.length>30&&firstimg!="null"){
  switch(biggestArea()){
  
case 0:
dataDiv.style.left = (curX-300) + "px";
   dataDiv.style.top = curY-202+ "px";
   break;
   case 1:
   dataDiv.style.left = (curX +120)+ "px";
   dataDiv.style.top = curY -202+ "px";
   break;
   case 2:
   dataDiv.style.left = (curX-320) + "px";
   dataDiv.style.top = curY-5+ "px";
   break;
   case 3:
   dataDiv.style.left = (curX+100) + "px";
   dataDiv.style.top = curY -5+ "px";
   break;
  }
}else if(summary.length>30&&firstimg=="null"){
switch(biggestArea()){
   case 0:
   dataDiv.style.left = (curX-300) + "px";
   dataDiv.style.top = curY-165+ "px";
   break;
   case 1:
   dataDiv.style.left = (curX +120)+ "px";
   dataDiv.style.top = curY -155+ "px";
   break;
   case 2:
   dataDiv.style.left = (curX-320) + "px";
   dataDiv.style.top = curY-5+ "px";
   break;
   case 3:
   dataDiv.style.left = (curX+100) + "px";
   dataDiv.style.top = curY -5+ "px";
   break;
  }
}else{
//alert("biggestArea()=="+biggestArea());
//alert("curX=="+curX+"curY=="+curY);
switch(biggestArea()){
   case 0:
   dataDiv.style.left = (curX-300) + "px";
   dataDiv.style.top = curY-84+ "px";
   break;
   case 1:
   dataDiv.style.left = (curX +120)+ "px";
   dataDiv.style.top = curY -88+ "px";
   break;
   case 2:
   dataDiv.style.left = (curX-300) + "px";
   dataDiv.style.top = curY-5+ "px";
   break;
   case 3:
   dataDiv.style.left = (curX+100) + "px";
   dataDiv.style.top = curY -5+ "px";
   break;
}
}
} function getCursor(){
 var e;
 if(IE){
   e=window.event;
 
 }else{
   e=arguments[0];
 }
 
 if(e.pageX||e.pageY){
   curX=e.pageX;
   curY=e.pageY;
     //alert("333curX=="+curX+"curY=="+curY);
 }else{
//alert("111curX=="+curX+"curY=="+curY);
  //alert("--e.clientX=="+e.clientX+"e.clientY"+e.clientY);
   if(e.clientX||e.clientY){
     if (document.body.scrollTop > document.documentElement.scrollTop) {
       curY = e.clientY + document.body.scrollTop;
     } else {
       curY = e.clientY + document.documentElement.scrollTop;
     }
   
     if (document.body.scrollLeft > document.documentElement.scrollLeft) {
    curX = e.clientX + document.body.scrollLeft+10;
//alert("555curX=="+curX+"curY=="+curY);
  } else {
    curX = e.clientX + document.documentElement.scrollLeft+10;
//alert("222curX=="+curX+"curY=="+curY);
  }
    }
  }
} function window_prototype_get_event()
{
 var func = arguments.callee.caller; 
 var evt; 
 while(func != null){
  evt = func.arguments[0]; 
  if(evt && (evt.constructor == Event || evt.constructor == MouseEvent)) return evt; 
  func = func.caller; 
 } 
 return null; 
}     这个是兼容ff的你看一下对你有帮助，我还做了一个简单的，现在找不到了时机会给你看看