如何在用户脚本中获得鼠标悬停图像效果

How to get mouseover image effect in a userscript?

本文关键字：悬停 鼠标 图像 用户 脚本      更新时间：2023-09-26

我需要在userscript中获得图像的滚动效果，但它不起作用。

以下是我尝试过的：

/*--- Create a button in a container div.  It will be styled and positioned with CSS.
*/
var zNode       = document.createElement ('input');
zNode.setAttribute ('id', 'suButton');
zNode.setAttribute( 'type', 'image' );
zNode.setAttribute( 'src', 'http://www.creativeadornments.com/nephco/doraemon/icons/doraemon_06.gif' );
znode.onmouseover='mouseover()';
znode.onmouseout='mouseOut()';
document.body.appendChild (zNode);
function mouseOver()
{
document.getElementById("suButton").src ="http://www.creativeadornments.com/nephco/doraemon/icons/doraemon_07.gif";
}
function mouseOut()
{
document.getElementById("suButton").src ="http://www.creativeadornments.com/nephco/doraemon/icons/doraemon_06.gif";
}
//--- Activate the newly added button.
document.getElementById ("suButton").addEventListener ("click", ButtonClickAction, true);
function ButtonClickAction (zEvent)
{
    //--- For our dummy action, we'll just add a line of text to the top of the screen.
    var button  = document.createElement ('a');
    location.href='http://www.stumbleupon.com/to/stumble/stumblethru:'+location.href.replace("http://","").replace("https://","").replace("ftp://","").split('/',4)[0];
}
//--- Style our newly added elements using CSS.
GM_addStyle ( (<><![CDATA[
    #suButton {
        position:               fixed;
        bottom:                 0px;
        left:                   0px;
        margin:                 0px 0px 50px 0px;
        opacity:                0.4;
        cursor:                 url(C:'buttercup_06.cur),url(http://www.creativeadornments.com/nephco/powerpuffgirls/cursors/ppg_01anim.gif),url(myBall.cur),pointer;
        border:                 0px outset red;
        z-index:                222;
        padding:                5px 5px;
    }
]]></>).toString () );

删除这些行：

znode.onmouseover='mouseover()';
znode.onmouseout='mouseOut()';

这不是添加事件侦听器的方法。

然后更改：

//--- Activate the newly added button.
document.getElementById ("suButton").addEventListener ("click", ButtonClickAction, true);

到此：

//--- Activate the newly added button and add rollover image handling.
var zNode = document.getElementById ("suButton");
zNode.addEventListener ("click",        ButtonClickAction,  true);
zNode.addEventListener ("mouseover",    mouseOver,          true);
zNode.addEventListener ("mouseout",     mouseOut,           true);
相关文章：