1

マウスカーソルの横に、カーソルの座標とマウスが置かれている画像の左上隅を示す小さなオーバーレイを作成しようとしています。私はほとんどそこにいます。それはある程度機能しますが、まだいくつかの問題があります。

  1. スクロールすると (マウス ホイールまたは横のスクロール バーを使用)、オーバーレイとカーソルが互いに離れます。オーバーレイはページと共に移動し、カーソルはモニターに対して静止したままです。すでに「onscroll」を試しましたが、うまくいきません

  2. ページ内の画像に「onmouseover」と「onmouseout」関数を使用しましたが、何らかの理由で、ページが読み込まれたときに一度だけ実行されます。

  3. マウスを画像の左上隅に置くと0,0、座標として表示されます。X は実際には 0 ですが、Y は実際には -15 です。何らかの理由で、画像の座標は上端から 15 ピクセル下にあります。理由はわかりません。

OK、問題について言及したので、ここに私のコードがあります:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="main2008.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="Ext/mcs2.js"></script></head>
    </head>

    <body>  
        <div id="content">
            <h1>JS test</h1>
            <img src = "pic.jpg">
        </div>
    </body>

</html>

CSS

#xy {
    font-size:10px;
    position: absolute;
    top: 0px;
    right:0px;
    width:60px;
    visibility: visible;
    color:#006699;
    background-color:#ffffff;
    border: 1px solid #66ccff;
    z-index: 10;
    padding:7px;
}

JS

var myX, myY, xyOn, myMouseX, myMouseY, ImgX, ImgY, Active;


//For each image, set onmouseover and onmouseout to the functions that activate and deactivate
$(document).ready(function() {
    $("img").each(function(i) {
        this.onmouseover = getcoordinates(this);
        this.onmouseout = deactivate(this);
    });
});

//Creation of new div is inside window.onload because it needs to be done when body already exists
  window.onload = function(){
    var divg = document.createElement("div");
    divg.setAttribute('id',"xy");
    divg.appendChild(document.createTextNode("New DIV"));
    document.body.appendChild(divg);  
  };

function getcoordinates(object) {
    ImgX=object.offsetLeft;
    ImgY=object.offsetTop;
    //document.getElementById('xy').style.visibility='visible';
    Active=1;
    alert("Acti"); //This pop-up is just for debugging
}   

function deactivate(object) {
    //document.getElementById('xy').style.visibility='hidden';
    alert("Deacti");  //This pop-up is just for debugging
    Active=0;
}   

document.onmousemove=getXYPosition;  //THIS IS THE KEY FUNCTION!!! And it works
window.onscroll=getXYPosition;    //I tried this to fix the scrolling problem, but it does not work

// Cursor coordinate function

    xyOn = true;
    function getXYPosition(e){
        if (1==1) {    //Instead of "1==1" I had written "Active==1", but it does not work at all
            myMouseX=(e||event).clientX-ImgX;
            myMouseY=(e||event).clientY-ImgY;
            if (myMouseX + 100 > document.documentElement.clientWidth) {
                myX = myMouseX - (myMouseX + 80 - (document.documentElement.clientWidth));
            } else {
                myX = myMouseX + 20;    
            }
            if (myMouseY + 64 > document.documentElement.clientHeight) {
                myY = myMouseY - (myMouseY + 44 - (document.documentElement.clientHeight));
            } else {
                myY = myMouseY + 20;    
            }
            if (document.documentElement.scrollTop > 0) {
                myY = myY + document.documentElement.scrollTop;
                myMouseY = myMouseY + document.documentElement.scrollTop;
            }
            document.getElementById('xy').style.top = myY + "px";
            document.getElementById('xy').style.left = myX + "px";
            document.getElementById('xy').innerHTML = "X is " + myMouseX + "<br />Y is " + myMouseY;
            document.getElementById('xy').innerHTML = document.getElementById('xy').innerHTML;
            if (xyOn) {
                document.getElementById('xy').style.visibility = "visible";
            } else {
                document.getElementById('xy').style.visibility = "hidden";
            }
        }
    }

PS: オーバーレイ div を追加し、HTML ではなく JS でプロパティを設定する理由を知りたい場合は、ある時点で JS コードを作成すると、これが Chrome 拡張機能になるためです。 JS と CSS をページに挿入しますが、HTML は挿入しません。

4

0 に答える 0