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

发布于 12-28 14:50 字数 1887 浏览 2 评论 0原文

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

这是我尝试过的:

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

晨光如昨2025-01-04 14:50:28

删除这些行:

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

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);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文