如何在用户脚本中获得鼠标悬停图像效果?
我需要在用户脚本中获得图像的翻转效果,但它不起作用。
这是我尝试过的:
/*--- 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 技术交流群。

删除这些行:
这不是添加事件侦听器的方法。
然后将其更改
为:
Delete these lines:
That's not the way to add event listeners.
Then change this:
to this: