Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Pedro098

Mudar de cursor quando se clica num botão

Recommended Posts

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.

Edited by Pedro098

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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 ?

Share this post


Link to post
Share on other 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>

Edited by Pedro098

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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>

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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;

}

Edited by Pedro098

Share this post


Link to post
Share on other 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]

  • Vote 1

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.