Ir para o conteúdo
Pedro098

Mudar de cursor quando se clica num botão

Mensagens Recomendadas

Pedro098

Boa tarde eu estou a tentar fazer um código que permita mudar de cursor cada vez que se clica num botão, mas não estou a conseguir fazer a função em Javascript porque não sei como chamar o cursor declarado em CSS.

CSS:

<style>
body {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=14240), auto;}
a:hover, button {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=14240.ani),
url(http://www.rw-designer.com/cursor-extern.php?id=14240.png),
progress !important;}
</style>

HTML:

<button id="btt" style="cursor:hover" type="button" onclick="onclick()">Change</button>

Obrigado.

Editado por Pedro098

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

primeiro de tudo, deverias ter as definições dos cursores em classes diferentes do CSS.

segundo, não apresentas a função "onclick" (que não se deveria chamar assim) que está declarada no evento "onclick" do botão.

terceiro, deverás nessa função que não apresentas, a alteração da classe de CSS criada, associada ao "body" do teu documento HTML, para alterar o cursor como dizes pretender fazer


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Pedro098

Ok, penso que assim funcione.

<body class="body">
<style>
.body { cursor: url(http://www.rw-designer.com/cursor-extern.php?id=14240), auto;}

.a:hover, button {
 cursor: url(http://www.rw-designer.com/cursor-extern.php?id=14240.ani), 
         url(http://www.rw-designer.com/cursor-extern.php?id=14240.png), 
         progress !important;
}
</style>
<button id="btt" class="a" type="button" onclick="onclick()">Change</button>

<script>
function onclick() {

}
</script>

Mas como posso fazer a função para mudar o cursor ?

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Pedro098

Assim está correto ?

<style>
.body { cursor: url(http://www.rw-designer.com/cursor-extern.php?id=14240), auto;}
</style>

<style>
.a:hover, button {
cursor: url(http://www.rw-designer.com/cursor-extern.php?id=14240.ani),
url(http://www.rw-designer.com/cursor-extern.php?id=14240.png),
progress !important;
}
</style>

Editado por Pedro098

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

como disse :

primeiro de tudo, deverias ter as definições dos cursores em classes diferentes do CSS.

tu não tens classes diferentes a servir de referência ao tipo de cursor a ser apresentado


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Pedro098

Assim ?

<style>
.body { cursor: url(img1), auto;}
.body2 { cursor: url(img2), auto;}


.a:hover, button {
 cursor: url(img1.ani), 
         url(img1.png), 
         progress !important;}
.b:hover, button {
 cursor: url(img2.ani), 
         url(img2.png), 
         progress !important;}
</style>

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

isto não serve para nada para o problema descrito na primeira entrada deste tópico:


.a:hover, button {
cursor: url(img1.ani),
url(img1.png),
progress !important;}
.b:hover, button {
cursor: url(img2.ani),
url(img2.png),
progress !important;}
[/Code]

agora que tens as classes .body e a classe .body2, terás de na função chamada no evento onclick do botão, alterar as classes:

- verificar qual das classes está associada nesse momento, e trocar


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Pedro098

Posso obter o valor desta forma ?

var cur1 = document.getElementById("body").classValue;
var cur2 = document.getElementById("body2").classValue;
function onclick() {

document.getElementById("body").classValue = body2;

}

Editado por Pedro098

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

a maneira mais simples será :


<body class="body">
<script>
function onclick() {
var body = document.getElementByTagName('body');
if (body.className.match(/(?:^|\s)body(?!\S)/)) {
body.className = body.className.replace(/(?:^|\s)body(?!\S)/g , '') + ' body2';
cur = 'body2';
} else {
body.className = body.className.replace(/(?:^|\s)body2(?!\S)/g , '') + ' body';
cur = 'body';
}
}
</script>
[/Code]

  • Voto 1

IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.