如何在加载页面时使用自定义图像为鼠标光标设置动画?

时间:2009-12-31 19:00:04

标签: css firefox animation cursor onload

我正在尝试使用自定义图片更改我网站上的光标鼠标。

这是我的实际CSS:

<style type="text/css">
<!--
body {
cursor:url(images/default.cur),auto; 
}
a:hover {
cursor: url(images/hover.cur),auto;
}
a:active {
cursor: url(images/wait.ani),auto;
}
-->
</style>

Firefox 3.5.6确实使用我的.cur文件更改了默认光标,但问题是.ani光标不适用于Firefox(甚至.gif)。它确实适用于IE。

我正在使用的光标文件here

另一个问题是,我只是更改了 a:active 图片来为我的光标设置动画,但它会快速消失。

当我们点击进入某个页面并且光标在加载此页面后变为“正常”时,我想更改光标。

我期待的是当有人点击我网站的某些内部链接时更改光标的方法。

我不必更改所有链接来执行此操作,但它似乎不起作用。

我想过一些window.onload JavaScript,但我没有实现写它,可能有更好的方法。

感谢您提供CSS或JavaScript建议。

3 个答案:

答案 0 :(得分:4)

请求编程解决方案时,请不要提供设计反馈。回归设计批评并不是开发人员的作用。这可能不是他的决定,它可能不起作用,但他想尝试它,我们应该帮助。如果你一直处在一个程序员对每个设计决策都有重要判断力的环境中,那么你会发现它对整个团队都是非常具有破坏性的。如果您不评论是否同意他们想要做的事情,设计师和团队成员会更高的价值,除非被问及。我希望你能想到它,你会理解为什么它很重要。

答案 1 :(得分:1)

别。如果你去了朋友的myspace页面,你的光标突然变成了一条巨大的紫色龙,而你却不知道它实际指向的位置,你会怎么样?

这对用户来说很刺激,因此很恼火。如果你想让他们知道某些东西在后台工作,请使用一个动画gif显示 over 页面,而不是光标。


如果您也有,您可以在页面上的所有元素上使用javascript进行设置。我不认为它级联。如果是这样,只需将其设置在身体上并完成它。

答案 2 :(得分:0)

如果使用ASP,它可以简化使用解析网址...即

    cursor:url('\<\%\=ResolveUrl("~/img/magnify.cur")\%\>');

显然我倾向于同意其他陈述,因为熟悉是任何优秀设计的关键,将环境定制到某种程度,以至于用户感觉不熟悉或者在某种程度上他们的系统被改变的印象,是一个糟糕的坏设计,也反映在设计师身上。我并不是说设计很沉闷,但有点保留。

我可能不喜欢MetroUI(而不是Metro Web Design),但我喜欢它的根源,即“包豪斯”的设计理念。

"There is beauty in simplicity."