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

Question

我需要在用户脚本中获得图像的翻转效果，但它不起作用。

这是我尝试过的:

/*--- 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 () );

Answer 1

删除这些行:

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