Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

poteitow

Mudar Cursor normal para Image

Por , em Javascript

Recommended Posts

poteitow    0

poteitow
Postado

Olá,

 

No seguinte código, como eu altero o document.body.style.cursor="help" para document.body.style.cursor="Minha Imagem"

<html>
<head>
<style type="text/css">

body {
    cursor:default;
}
</style>

<script type="text/javascript">
function change() {
document.body.style.cursor="help";
}
</script>
</head>

<body>

<div onclick="change()">
Clique Aqui!
</div>

</body>
</html>

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

rootzig    1

rootzig
Postado

Fala aí, beleza?

 

Tenta assim:

document.body.style.cursor = "url('URL'), auto";

Testei com extensão .CUR e GIF.

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

poteitow    0

poteitow
Postado

Fala aí, beleza?

 

Tenta assim:

document.body.style.cursor = "url('URL'), auto";

Testei com extensão .CUR e GIF.

 

Valeu

 

Campeão,

 

A parte de trocar pela imagem deu certo... mas o problema é que agora não está voltando para o mouse que aparecia antes de clicar... ustou usando esse código que dá certo sem as imagens:

document.body.style.cursor=(document.body.style.cursor=="help") ? "default" : "url('tinta.png'), auto";

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

rootzig    1

rootzig
Postado

Tranquilo?

 

Não sei se é a maneira mais correta, adicionei outra função com o nome remover().

Tenta ver se resolve pra você.

<html>
<head>
<style type="text/css">

body {
    cursor:default;
}
</style>

<script type="text/javascript">
function change() {
document.body.style.cursor="help";
}
function remover() {
document.body.style.cursor="default";
}


</script>
</head>

<body>

<div onclick="change()" onmouseout="remover()">
Clique Aqui!
</div>

</body>
</html>

Valeu, té mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

poteitow    0

poteitow
Postado

Olá,

 

Olha nessa função o efeito fica correto, ao clicar o mouse muda, ao acabar o clique o mouse volta ao cursor antes da ação. O problema é que onde está os dois "help" já tentei trocar pela imagem mas da erro. Do jeito que está ali funciona com o "cursor.png" mas não funciona se trocar o "help" também...

function change() { 
document.body.style.cursor=(document.body.style.cursor=="help") ? "url('cursor.png'), crosshair" : "help";
}

Mais uma vez obrigado pela força, campeão!

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

poteitow    0

poteitow
Postado

Olá,

 

Nesta função a ideia é uma div certo, onde vai ter um cenário de guerra... ao passar o mouse sobre a div aparecerá o "cursor.png" que é a mira da arma, ao clicar na imagem a ideia é que apareça o cursor "tinta.png" simbolizando a boinha do paintball... Na função está funcionando essa ideia legal, porém ao tentar trocar "help" por algum cursor imagem, o efeito para de funcionar (do jeito que está no momento funciona)... 

function change() { 
document.body.style.cursor=(document.body.style.cursor=="help") ? "url('cursor.png'), crosshair" : "help";
}

Obrigado pela atenção!!

Abraços!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado 
document.body.style.cursor=="help"

Isso não funciona!

Destina-se somente a definir estilos

Para investigar o valor de uma propriedade CSS com JavaScript use o método window.getComputedStyle(elemento)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito