Imagem seguindo o ponteiro do mouse

Essa é uma versão mais fácil de usar para colocar uma imagem seguindo o cursor do mouse no seu blog. Tudo que você precisa fazer é colocar a url de uma imagem no lugar indicado no código e pronto essa imagem vai aparecer junto com o ponteiro do mouse e se move junto com o mouse para qualquer lugar na tela.

<script type="text/javascript">
imagemcursor = 'http://img9.imageshack.us/img9/5186/orkutsj.gif';
numeroimg= '5';
</script>
<script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/mouseimg.js"></script>

Quanto ao numero 5 é o numero de vezes que a imagem se repete, então pode modificar como quiser. Para fazer a imagem apenas seguir o mouse use o numero 1.

Cuidado para não apagar nada além do endereço da imagem, pois se apagar uma das aspas o código não funciona. Para colocar esse efeito no seu blog entre na pagina layout, adicionar gadget, html/javascript e cole o código já modificado com a imagem que você quiser, esse gadget com o código pode ficar em qualquer parte da página que funcionará na página toda, ou seja, a imagem segue o mouse por todo o blog.

Se for utilizar uma imagem redonda ou outro formato sugerimos que use uma imagem no formato gif com fundo transparente, porque o fundo da imagem vai aparecer também, mesmo que seja da mesma cor de fundo do seu blog, quando passar o mouse sobre o texto ou qualquer outra coisa dá pra notar o real formato da imagem, por isso achamos que o gif transparente é melhor opção.

Veja também:

O que fazer quando a imagem não aparece

Programas grátis para editar ou fazer imagens
Onde e como hospedar imagens

108 comentários :

  1. Excelente post. Já procurava esta aplicação há muito tempo.
    Muito bom. Funciona ás 1000maravilhas. Parabens por este blog espectacular e continuação de um bom trabalho :D

    ResponderExcluir
  2. Deem uma olhada no meu blog. :D

    ResponderExcluir
  3. da pra mudar o endereço do Blog entre em conteto comigo vlw adoro o seu blog com dicas exelentes

    ResponderExcluir
  4. Animações dos Sellens A-Ssim é possível mudar o endereço do blog, mas você vai perder os links que tem para o seu blog, por exemplo no caso desse blog, se eu mudar o endereço dele, em todos os blogs tem meu banner ou link quando alguém clicar nele vai aparecer que o blog não existe, a solução é mudar o nome do blog e depois criar outro com o nome antigo apenas para deixar uma mensagem dizendo que mudou de endereço, veja mais aqui

    http://dicasparablogs.blogspot.com/2007/09/trocar-endereo.html

    ResponderExcluir
  5. Olá!!
    Eu amo estar aqui para aprender sobre blogs!

    Está acontecendo o seguinte no meu blog:

    As minhas postagens não estão sendo atualizadas nos outros blogs...

    Está aperecendo por exemplo no blog de várias amigas uma postagem que fiz há 2 semanas atrás.


    Como faço para mudar isso? aconteceu derepente.

    Um grande abraço!!

    ResponderExcluir
  6. Simoneinfelizmente não vou poder ajudar nisso, pois o sistema de mostrar as ultimas postagens é todo feito no proprio blog ou seja não temos controle nenhum sobre ele.

    você colocou o feedburner no seu blog a pouco tempo(neste período que as atualizações pararam)? se fez isso deve ter cadastrado algo errado no feedburner

    ResponderExcluir
  7. ótimas suas dicas, parabéns...me passa ai uns sies onde eu consio pegar a tal url de gifs,pq eu tentei em alguns mas não acho url de nenhum gif.

    ResponderExcluir
  8. Green eyestalvez você tenha colocado o link errado na imagem, pois acabei de testar novamente o código e funcionou normalmente, qual o endereço da imagem que está usando?

    tente colocar do jeito que está neste blog com essa imagem mesmo só para testar.

    ResponderExcluir
  9. olá Adorei todas as dicas dadas aqui muito legal mesmoo obrigada gisele moura

    ResponderExcluir
  10. Este comentário foi removido pelo autor.

    ResponderExcluir
  11. Este comentário foi removido pelo autor.

    ResponderExcluir
  12. Este comentário foi removido pelo autor.

    ResponderExcluir
  13. Este comentário foi removido pelo autor.

    ResponderExcluir
  14. ola fabiano...deu certo sim..obrigada, olha, seu blog é uma mão na roda pra quem não entende muito dessas coisas, assim como eu, rsrsrsrsrs.

    ResponderExcluir
  15. olá...estou começando o meu blog tb e achei mto legal suas dicas...ja estou a seguir...vlw...

    ResponderExcluir
  16. eu utilizei este código de imagem seguindo o mouse e ficou muito bom, mas hoje quando fui entrar no blog ele demorou para carregar e sumiu a imagem do mouse, então exclui aquele item e copiei novamente o código completo mas mesmo assim não consegui. Você sabe me dizer oque houve?

    ResponderExcluir
  17. ginatestei agora o código e funcionou normalmente, se for usar com essa imagem sugiro que salve e hospede a imagem em outro lugar pois usei essa numa hospedagem gratis então se muita gente usar a mesma imagem ela pode parar de aparecer

    ResponderExcluir
  18. BUENA! ONDE É QUE EU COLOCO COLOCO A URL DA MINHA IMAGEM

    ResponderExcluir
  19. o endereço da imagem você coloca no lugar dessa http://img402.imageshack.us/img402/3562/glitterfy.gif

    ResponderExcluir
  20. Bem legal essa dica,
    coloquei uma imagem que combinou
    com o estilo do meu blog :}

    ... Até mais!

    ResponderExcluir
  21. Oi sou nova por aki e gostaria de saber o por que quando eu coloquei o url da minha imagem no codigo pra mim por seguindo o ponteiro ñ aconteceu nada ñ apareceu a imagem ??? Espero anciosa pelo um retorno de resposta de alguem ... Bjs fikem com Deus !!!

    ResponderExcluir
  22. nao consegui fazer.
    Eu fui em Layout > Elementos da Pagina > Adicionar Gadget >
    E adicionei o codigo que voce falou mais nao apareceu a imagem seguinto o mouse!
    O que houve? Poderia dar mais detalhes?

    ResponderExcluir
  23. fizemos uma correção no código, tente novamente agora funcionará.

    ResponderExcluir
  24. Como faço para diminuir o tanto de vezes que a imagen se repete, pois está ficando embaçada eu queria so uma vez como faço ?

    ResponderExcluir
  25. neste código não dá pra mudar o numero de repetições, vou preparar outro com essa opção.

    ResponderExcluir
  26. Tentei e consegui tudo bem!Mas fica um nome ''Imagem seguindo o mouse'' quando vizualizo! Como é que eu tiro?

    ResponderExcluir
  27. você pode colocar o código em qualquer parte do blog, mesmo no final da pagina.

    esse texto é o link para que outras pessoas que gostem do código poderem achar onde pegar.

    ResponderExcluir
  28. Obrigada, Fabiano. Há muio que procurava.
    Valeu!!!

    ResponderExcluir
  29. valeu por me ajudar com meu blog
    seu site e 10

    ResponderExcluir
  30. Eu não consigo colocar a imagem para seguir o mouse nem uma imagem de fundo para meu blog!
    Por favor me ajude!

    ResponderExcluir
  31. provavelmente está usando o endereço errado da imagem, veja essa postagem
    http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html

    ResponderExcluir
  32. ei fabiano, me dá uma dica... testei muitos códigos e nada funcionou... o seu funcionou direitinho, com uma única observação: só funciona com imagens hospedadas fora do nosso site... mas tudo bem, meu problema é: a imagem fica super longe do cursos do mouse!! eu consigo algum código que a imagem fique pertinho do ponteiro???

    ResponderExcluir
  33. nem acredito, consegui!! não funcionou no cabeçalho, nao funcionou no corpo da página, não funcionou como widget, mas quando coloquei no rodapé da página funcionou como uma luva, com a imagem pertinha do cursor! que coisa não???

    ResponderExcluir
  34. Seguite:

    Fiz exatamente o que estava no tutorial. Só que, quando eu boto pra funcionar, a imagem ao invés de estar perto do mouse ( grudado ), ela está uns 7 centímetro de distância, meu Site/Blog é:
    http://geraldosgames.tk ou .blogspot.com

    ResponderExcluir
  35. Minhoca

    testei e funcionou normalmente a imagem fica bem proxima do ponteiro do mouse.

    coloque o código no seu blog como está aqui no exemplo

    ResponderExcluir
  36. Oii eu fiz assim
    o que pede em cima
    so que eu queria ranca
    e nao consigo eu aperto la
    naquela xavinha e aparece NOT FOUND
    por favor me ajuda o quanto antes

    ResponderExcluir
  37. Gaara Downloads

    qual o seu problema que retirar o código do blog? é só excluir o gadget.

    se tiver problemas da imagem não aparecer provavelmente está usando o endereço errado da imagem no código

    ResponderExcluir
  38. Gostei muito da sua ajuda no blog. vc está de parabéns!!!!!!!!!!!!

    ResponderExcluir
  39. Fiz e deu certo com o mouse. O detalhe que ficou arrastando e não gostaria disso. queria sem sair a seguencia de imagens. como fazer.

    ResponderExcluir
  40. aninha
    apartir da sua pergunta modificamos o código agora você pode definir quantas vezes a imagem aparecerá, ou seja é só colocar o numero 1 onde está o 5 no código e a imagem apenas seguirá o mouse sem repetições.

    ResponderExcluir
  41. Consegui colocar a sombra no mouse mas queria que fosse um desenho e o que aparece é um quadrado com um "x" no meio. Como faço?

    ResponderExcluir
  42. tacina leal
    se está aparecendo um X, é porque está usando o endereço errado da imagem, como está colocando o código ou qual o endereço da imagem?

    ResponderExcluir
  43. Quando entro no meu blog a imagem do cursor aparece muito distante
    O que faço?

    ResponderExcluir
  44. não tem como mudar a distancia da imagem

    ResponderExcluir
  45. *HarleyQuinn*
    explicando melhor até seria possivel alterar isso no código, mas eu iria prejudicar todas as pessoas que já usam e aprovam esse código do jeito que está. Mas vou ver se é possível publicar uma nova versão com mais configurações como por exemplo a distancia.

    ResponderExcluir
  46. oi nao consigo mudar a figura por favor me ajude

    ResponderExcluir
  47. July artes
    provavelmente está usando o endereço errado da imagem.

    veja aqui
    Imagem não aparece

    ResponderExcluir
  48. Coloquei no meu blog só que a imagem ficou muito longe do ponteiro do mouse, o que faço?

    ResponderExcluir
  49. Willerson Lucas
    vou fazer alguns teste, não sei porque no seu blog ficou assim.

    ResponderExcluir
  50. Olá, eu tentei fazer só q ñ consegui, e gostaria q vc me ajudasse... ficou uma mensagem assim no blog: imagem seguindo o mause, aí qd eu clico vem p/ a sua página. como eu faço p/ tirar esta mensagem do blog.
    receitasdasil. blogspot .com
    Vou esperar sua resposta.
    até +
    Silvana

    ResponderExcluir
  51. Silvana Muniz
    esse link serve para que outros blogueiros saibam como fazer isso no blog deles também.
    não tem como retirar.

    ResponderExcluir
  52. Fabiano eu sei q estas horas vc deve estar me xingando, falando pq esta foi sismar de fazer um blog e etcc.... mas poxa muita consegui com sua ajuda, então orulhe-se disso, pois vc explica mt bem e fez com uma burra aprendese algo...rsrsrs.
    Sério mesmo. Mas ainda tem um probleminha. Eu não estou conseguindo tirar o link das minhas mensagens.
    Me da uma ajudinha aí.
    Mas fala o portugues pq eu ñ entendi nada q vc falou de postagem e etcc.

    ResponderExcluir
  53. Silvana
    para tirar a mensagem precisa apagar o código do seu blog

    ResponderExcluir
  54. tem como diminuir a imagen porque eu usei uma ai mais ela é muito grande :( tem como diminuir? agradeço de responde

    ResponderExcluir
  55. Nossa, eu vi em um site e gostei paks, dai eu fiquei procurando e achei aqui, parabens vcs são os melhores :D

    ResponderExcluir
  56. Oiie Tudo bem?
    Não eestou conseguindo fiz tudo oque mandou é não entra eu aperto visualtulizar é não aparece nada Alguém poderia me ajudar Por Favor

    ResponderExcluir
  57. Belo post Sr. Fabiano, parabéns.

    Mas, em meu blog eu já testei vários códigos, de 3 sites, para colocar uma imagem seguindo o cursor e não deu certo.

    Qualquer coisa, eis meu blog: http://www.allefymax.blogspot.com

    Ajude-me por favor.

    ResponderExcluir
  58. Állefy Max
    visitei seu blog e a imagem apareceu, acho que já conseguiu corrigir o problema

    ResponderExcluir
  59. amigo uso o modelo espetacular ldta e onde eu coloco no html esse codigo por favor me ajude.

    ResponderExcluir
  60. Eu resolvi, durante uns segundos.
    Eu usei os 'velhos' templates do Blogspot. Aí apareceu.
    Tente denovo, acessar meu blog e utilize do navegador FireFox.
    Talvez haja algum problema ou incompatibilidade no template do meu blog.

    Atensiosamente, Állefy Max.

    ResponderExcluir
  61. Állefy Max
    infelizmente é possivel ter algo no seu template gerando incompatibilidade, mas é bem dificil de achar

    ResponderExcluir
  62. Olá!

    eu tenho uma duvida, quando uso isto a imagem fica longe do ponteiro do mouse...

    tem como resolveh?

    ResponderExcluir
  63. infelizmente não temos como resolver isso, esse é um erro que está sendo gerado pelos novos templates do blogger... se usar o código em um template antigo ou site funciona corretamente

    ResponderExcluir
  64. se a imagem ficar longe do cursor é só modificar o gadget de lugar que no blogspot fica na aba design - elementos da página, tinha colocado o meu gadget no canto da pagina daí a imagem ficava muito distante do mouse, daí troquei de lugar e ficou melhor...

    ResponderExcluir
  65. quando eu uso o código fica aparecendo um link em cima do sidebar e deixa o blog feio
    como tirar isso?

    ResponderExcluir
  66. Eu coloquei o gadget no fim da pag... a imagem ta aparecendo mas tipo segue o mouse de longe, e soh aparece no fim da pagina

    ResponderExcluir
  67. com os novos templates que usar esse código antes de < /head > na pagina editar html

    ResponderExcluir
  68. Querido Fabiano, já tentei de tudo mas ainda não consegui, estou estranhando por que já usei diversos códigos deste seu blog e sempre dão certo. Aliás eu visito o dicas para blogs diariamente pois não entendo nadinha do assunto mas com suas dicas estou conseguindo melhorar cada vez mais o meu primeiro e recém criado blog. Vi sua última resposta falando em novos templates, colocando o código no html. Seria talvez o meu caso? Ajude-me por favor. Muito obrigado por tudo. Vc é D++++

    ResponderExcluir
  69. denise o seu template é um dos novos modelos

    ResponderExcluir
  70. Fabiano parceiro, amigão, ajudador, a cada dia aprendo muito com suas maravilhosas dicas. Obrigada pelo auxilio, parece que adivinha o que queremos ou precisamos. Grande Abraço pessoa necessária!!!

    ResponderExcluir
  71. numca conseguir alquem min ajuda

    ResponderExcluir
  72. Oiii, eu naum consegui fazer D:
    eu tenho no meu blog um script pra "cair estrelinhas" unde o muse passa, sera que é por isso?
    queria saber se dá pra deixar as estrelinhas e esse gif de corações seguindo o mouse: http://presepada.org/wp-content/uploads/2009/08/emoticoncoracao17.gif

    Ps.: Além disso, seguindo as dicas do site, eu mudei meu ponteiro. Então tbm queria saber se isso faz com que o gif não possa seguí-lo.

    Obrigada desde jáh, Adorei mto as dicas (:

    ResponderExcluir
  73. Peppers
    só precisa colocar esse endereço no código

    robson jose
    o que está precisando fazer no seu blog?

    ResponderExcluir
  74. Muito bom, mas, o código não funcionou no gatget, estava abrindo como link na sua pagina, pois então decidi testar na modificação do HTML antes de ser fechada a tag HTML então funcionou. Mas obrigado.

    ResponderExcluir
  75. no meu aki o mouse a imagem fica longe do mouse nao fica perto vcs podem me ajudar

    ResponderExcluir
  76. o código está dando erro nos novos templates... não tem o que fazer

    ResponderExcluir
  77. Boa noite Fabiano! Achei muito boa a Dica.Coloquei o Código do jeito que vc demonstra,no HTLM Java Scripts e não deu certo.
    Vou tentar colocar com a imagem que vc tem.Obrigada

    ResponderExcluir
  78. tipo eu coloco so que ele fica muito distante do mouse como eu altero ??

    valeu

    ResponderExcluir
  79. nos novos templates não tem como corrigir isso

    ResponderExcluir
  80. coloquei e não aconteceu ND nota: o meu blog ja tem umaoutra imagem no tutor daqu itrocar cursor

    ResponderExcluir
  81. se já tem um código para trocar o cursor precisa retirar... não adianta colocar dois códigos para fazer a mesma coisa... isso gera conflito e não deixa nenhum funcionar

    ResponderExcluir
  82. EU N VI CONTATOS NO SEU BLOG TER ACESSO AO SEU E-MAIL...PORÉM QUERO MUITO SABER ESPECIFICADAMENTE UMA COISA Q ESTA ME DEIXANDO DOIDA
    ESTE É O MEU E-MAIL PODERIA ENTRAR EM CONTATO COMIGO?
    QUELLP1@HOTMAIL.COM
    ESTE É O MEU BLOG
    CANTINHODAQUESIA.BLOGSPOT.COM
    É SOBRE A PAGINA DO BLOG QUE EU COLOCO INICIO MEU HOBBY CONTATO ETC ETC...E ELE UTRAPASSA O POST EU QUERIA QUE FICASSE SÓ EM UMA COLUNA ENTENDE?
    PODE ME AJUDAR???

    ResponderExcluir
  83. Quesia Leal
    não tem como deixar a coluna variavel... depois que termina o post.

    é possivel colocar gadgets no rodape, mas eles serão sempre no final da pagina

    ResponderExcluir
  84. Estou tentando ja faz 5 horas e naum conseguir colocar

    ResponderExcluir
  85. Consegui mais a ceta estah mt longe do mouse

    ResponderExcluir
  86. s@muelxc
    infelizmente em alguns templates dá esse erro e não tem como corrigir

    ResponderExcluir
  87. ola fabiano !! boa noit? bom d++ o site dicas para blog sempre venho aki, e vejo como uma verdadeira mina de informações, parabens. o meu caso é o seguinte quando eu coloco o codigo, a pagina do blog ao baixar ela acaba mais ainda vai descendo, sem conteudo nenhuma mais como se tivesse, mas não tem, o que eu posso fazer pra resolver?

    ResponderExcluir
  88. STUDIO SILVA-ME
    isso é proprio do código.. quando chega ao final da pagina ele faz aparecer a barra de rolagem

    ResponderExcluir
  89. Olá fabiano vc tem um codigo que acompanhe o mouse mais tipo um lik. Citando um exemplo tipo o passarinho do twitter sobrevoando a pagina acompanhando o ponteiro do mouse. ai vc clica sobre ele e abre a pagina do twitter.

    ResponderExcluir
  90. tem códigos para fazer texto ou imagem acompanhar o mouse, mas não dá para clicar neles

    ResponderExcluir
  91. Gostaria de saber se tem como hospedar um jogo, em meu blogspot se tiver faz uma matéria dizendo sobre isso por favor . Obrigado

    ResponderExcluir
  92. @Anônimo o blogger não aceita hospedagem de arquivos, mas tem muitas hospedagem gratis, inclusive o google site ou google docs

    ResponderExcluir
  93. Grato Fabiano.
    Tenho um cursor seguidor do mouse, que apareceu em algumas de minhas publicações.
    Naquele tempo, um amigo cedeu-me no Multiply, e consegui. Hoje estava fazendo a "desconstrução" do local onde o mouse aparecia, era somente quando passava por cima de determinadas imagens.
    Localizei. Utilizei o código, mas pareceu-me incompleto, e tanto é, que não deu certo. Fiz um google search e teu site apareceu, e creio bem colocado e mais clicado porque aparece a frase "um jeito mais fácil". Pensei: Pronto. Vai ser mamão com açucar.
    Copiei o código, mas não funcionou (coloquei entre o Head e o /head.
    Aí, pra garantir, colei o link do endereço da imagem, e cliquei, apareceu. Agora, com medo de que possa vir a ficar inutilizada, salvei a imagem no meu site, e com o novo endereço eu encontrei no seu agradecido blog. E já desconfiado que o local não era aquele, coloquei-o no box do cabeçalho e pronto. Funcionou beleza. Só na hora de passar o mouse por cima de conteúdo em flash, a setas do mouse passa mas o seguidor fica parado à margem, e assim que a seta do mouse sai para conteudo não-flash, o dseguidor corre pra ele, feito um cachorrinho que encontrou seu dono. Essa do "cachorrinho", espero, não leve -- o meu seguidor da seta do mouse -- a algo injuriante, pois foi no contexto carinhoso. E a Ele peço perdão, se for o caso.

    Obrigado Fabiano.
    Gostei do blog/site (0u saite, tipo Millor Fernandes).
    Abraço.
    O meu seguidor da seta do mouse é um gif com o nome "Jesus"!

    Lustato.
    Só não gostei de não poder deixar um pequeno link que seja.
    Desta feita, então, farei uma Comiunidade em nossa rede social Brasil Poesias e com o leitor de feeds, transmitir o teu feedburner.
    http://feeds.feedburner.com/dicaparablog
    E a comunidade terá o nome do seu blog, pois gostei muito dele, e de como você se desfdobra para responder tantos comentários.
    A comunidade será no link
    http://brasilpoesias.ning.com/group/dicas-para-blogs-ponto-com-ponto-br (muito grande)

    Então colocarei http://brasilpoesias.ning.com/group/dicas-para-blogs

    Um abraço
    Lustato.
    Poderímos fazer parceria?
    Eu faço essa comunidade, coloco um banner que você desejar, em todas as nossas 10 mil páginas; e você arruma um cantinho bom para o nosso link ou botton, ou meio-banner.
    Se desejar contacte:
    http://www.lustatotenterrara.com/contato.php

    .

    ResponderExcluir
  94. oie eu não consegui fazer isso podia me ajudar? Meu msn e email é esse: yasmin.chemale@gmail.com

    ResponderExcluir
  95. @yaya_fofa talvez tenha colocado o endereço da imagem errado

    ResponderExcluir
  96. A imagem ficou super distante da seta e conforme vou baixando a página desparece de vez.
    Pq será?

    ResponderExcluir
  97. em alguns templates esse código apresentou esse problema mas não tem como resolver

    ResponderExcluir
  98. oi amigo .boa noite olha so postei no meu site e deu serto obrigado mas como faço para a imagem descer ate o fim da pagina ela so acompanha ate serto smeios o mause

    ResponderExcluir
  99. bom, a imagem no meu ponteiro ficou muito distante .. como faço pra aproximar?

    ResponderExcluir
  100. Fabiola, esse é um problema que apareceu com os novos templates do blogger, mas não tem como corrigir

    ResponderExcluir
  101. nao entende nada , eu axo que vc tem qi colocar em linguem que pricipiante entendão ...

    ResponderExcluir
  102. isabel cristina esse código é simples só precisa trocar o endereço da imagem

    ResponderExcluir