JavascriptとAJAX：画像をカーソルの隣にフローティングする質問

Question

フローティング画像をマウスポインタの隣に表示するjavascriptコードがあります（phosを使用すると、モスがホバリングしている画像が表示されます）。ページ自体のイメージは少し下にサイズがあるため、完全なサイズです）。しかし、画像がページの左側にある場合は問題ありませんが、画像が右側にある場合は問題があります。

コード：....

<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-- 

自身でこれは結構です、それは動作します：ここで

<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> 

は浮動コンテンツをトリガーする標準の画像です。次のサムネイル画像上にマウスを浮動させることができ、アスペクト比を維持しながら浮動画像も変化するためです。しかし、サムネイル画像が右側にある場合、浮動画像は画面の右端から外れて見えません。JSコード内に「ブロック」を配置する方法はありますか？そのため、サムネイル画像が代わりにマウスポインタの左側の画像を表示するよりも、コンテンツの端（画面の端またはDVレイヤの端）に近いですか？

次の質問：このコードは、ページを単独で開くとうまくいきますが、私のウェブサイトのデザインではページがAJAXによってDIVレイヤー内で開くように呼び出されます。これはコードを破壊し、それでは機能しません。これは、私が書いた他のスクリプトでも起こっています。それだけでうまく動作しますが、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; 
}