Jump to content
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

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.