鼠标悬停在javascript处理程序上

mouse over handler for javascript

本文关键字：处理 程序上 javascript 悬停 鼠标      更新时间：2023-09-26

这是当用户将鼠标悬停在图像上时的鼠标悬停函数它在html: onmouseover="big(this)

中执行此函数

而这是我的javascript代码

   function big(x)
    { 
        var img = document.createElement("img");
        img.src="images/related-large2.jpg";
        img.width= 200;
        img.height= 200;
        document.body.appendChild(img);
    }

我如何添加子图像参考点，我悬停在图像上，而不是将图像附加到所有的方式在页面的底部?

img.style.top=800;
img.style.right=100;
where.parentNode.appendChild(img);

您需要获得事件的x和y坐标，并将图像的顶部和左侧属性设置为此。要做到这一点，您需要将vent传递给函数。我注意到你实际上并没有使用你传入的对象，但无论如何已经包含了它。

<div onmouseover="big(event, this)">
hello
</div>
<script>
function big(e, obj)
    { 
        var img = document.createElement("img");
        img.src="images/related-large2.jpg";
        img.width= 200;
        img.height= 200;
        var x = e.clientX;
                var y = e.clientY;
                img.style.position = 'absolute';
                img.style.top = y + 'px';
                img.style.left = x + 'px';
        document.body.appendChild(img);
    }
</script>

看到示例

相关文章：