如何在用戶腳本中獲得鼠標懸停圖像效果？

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