Question

I need to get a rollover effect of image in userscript but it’s not working.

Here is what I tried:

/*--- 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

Delete these lines:

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

That’s not the way to add event listeners.

Then change this:

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

to this:

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