Javascript и AJAX: плавающее изображение рядом с курсором - вопросы

Question

У меня есть код javascript, который позволяет отображать плавающее изображение рядом с указателем мыши (и с помощью php оно показывает изображение, над которым находится mosue, но в полном размере, поскольку изображение на самой страницеуменьшил немного).Но хотя все в порядке, если изображение находится слева от страницы, есть проблема, если изображение находится справа.

Код:

<script>
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX; 
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d,i) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
$(d).setHTML ('<img src="'+i'" />');
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->
</script>

Здесьстандартное изображение, которое будет запускать плавающий контент:

<a onmousemove="ShowContent('FloatingImage','image.jpg'); return true;" onmouseover="ShowContent('FloatingImage','image.jpg'); return true;" onmouseout="HideContent('FloatingImage','image.jpg'); return true;" href="javascript:ShowContent('FloatingImage','image.jpg')">standard html</a>

<div 
   id="FloatingImage" 
   style="display:none; 
      position:absolute; 
      border-style: solid; 
      background-color: white; 
      padding: 5px;
      z-index:+1">
<img id="MouseImage" name="MouseImage" src="LR-10.jpg" />
</div>

--end code--

.... Само по себе это нормально, и это работает.так как вы можете навести курсор мыши на следующее уменьшенное изображение, и изменяющееся изображение изменяется соответственно, сохраняя соотношение сторон.НО, если уменьшенное изображение находится на правой стороне, плавающее изображение находится за правым краем экрана и его нельзя увидеть: есть ли способ поместить «блок» в коде JS, чтобы, если уменьшенное изображение былоближе к краю содержимого (краю экрана или краю содержащего DV слоя), чем вместо этого оно показывает изображение с левой стороны указателя мыши?

Следующий вопрос: этот код работает нормально, если я открываюстраница сама по себе - НО мой дизайн сайта будет призывать страницу открываться внутри слоя DIV с помощью AJAX.Это нарушает код и не работает тогда.Это произошло с другими написанными мной сценариями: само по себе работает нормально, но вставляется через запрос загрузки AJAX, и это не удается.Как это можно решить?

Спасибо.

Answer 1

Я изменил ваш скрипт так, чтобы изображение переключалось влево, когда мышь слишком далеко вправо:

var cX = 0, cY = 0, rX = 0, rY = 0, vW;
function UpdateCursorPosition(e) { cX = e.pageX; cY = e.pageY; }
function UpdateCursorPositionDocAll(e) { cX = event.clientX; cY = event.clientY; }

if (document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }

function AssignPosition(d) {
    if (self.pageYOffset) {
        rX = self.pageXOffset;
        rY = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
        rX = document.documentElement.scrollLeft;
        rY = document.documentElement.scrollTop;
    } else if (document.body) {
        rX = document.body.scrollLeft;
        rY = document.body.scrollTop;
    }
    if (document.all) {
        cX += rX; 
        cY += rY;
    }
    var oW = d.offsetWidth;
    if (cX + 10 + oW > vW) d.style.left = (cX - 10 - oW) + 'px';
    else d.style.left = (cX+10) + 'px';
    d.style.top = (cY+10) + 'px';
}
function HideContent(d) {
    if (d.length < 1) return;
    document.getElementById(d).style.display = 'none';
}
function ShowContent(d,i) {
    vW = ViewportWidth();
    if (d.length < 1) return;
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = 'block';
    document.getElementById(d).innerHTML = '<img src="'+i+'" />';
}
function ReverseContentDisplay(d) {
    if (d.length < 1) return;
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = (dd.style.display=='none')? 'block' : 'none';
}
function ViewportWidth() {
    if (self.innerWidth) return self.innerWidth;
    else if (document.documentElement && document.documentElement.clientWidth)
        return document.documentElement.clientWidth;
    else if (document.body) return document.body.clientWidth;
}