Any simple ways to customize cursor or add image to follow cursor?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Are there any simple ways to

1. change a cursor to customized image (not "wait", "help", "wait" cursor etc, but my own jpg or gif image)

or

2. have a jpg or gif image follow default cursor as the cursor moves?

without uploading external .js file? (I'm using Yola Free, as far as I know, .js file cannot be uploaded)

I'm not really familiar with java script or other code things, so I'm hoping to find simple solutions which works for Yola Free site! I've been looking for the suitable script, but I cannot find something works well.....

Thank you.
Photo of Kay

Kay

  • 6 Posts
  • 0 Reply Likes
  • frustrated

Posted 9 years ago

  • 1
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Photo of Kay

Kay

  • 6 Posts
  • 0 Reply Likes
Hi Diane,

Thank you for your reply. I've looked at the website, and followed the instruction, but still can't figure it out...Need help!

Where should I add the cursor CSS code? I've pasted it to Yola HTML widget, but it just showed the code like text only.....

I saw "where to add the code?" section on this website, and it says, "put the code either in CSS or Media section of Friendster Profiles", but does Yola has such section for CSS?

I'm lost....
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Kay

You may need to wrap your code in a style tag. Try this:

<style type="text/css">

your code goes in here

</style>

If this does not solve your problem, please let us know.
Photo of Kay

Kay

  • 6 Posts
  • 0 Reply Likes
Hello Sanja,

Thank you for your tips, I followed your instruction, and it worked for existing cursor, such as "help". For example,

------------worked!! Thank you Sanja! -----
body { cursor:help;}
----------------------------------------------------

But for customized one, it still doesn't work.... I tried like below. Something wrong with my code? My cursor file is uploaded to resource, and the file name is Favorites.cur

------------- Doesn't work Why?? ---------

BODY{cursor:url("resources/Favorites.cur");}

--------------------------------------------------

Please help me!!

Thank you.
Photo of Kay

Kay

  • 6 Posts
  • 0 Reply Likes
Hello Sanja,

I just tried it with Internet Explore, and it worked for customized one too!
I have been checking with Firefox previously, so I didn't notice until now... sorry.

But now I wonder if there is a similar code which works for both IE and FF?

Thank you!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hey Kay

I have always used Javascript kit for my image trail and never needed a JS file. Additionally, it is cross browser compatible. If you had a GIF or PNG with a transparent background then it will look much better than a JPG with a colored background.

Take any GIF image or clipart under 400KB and make the background transparent to place on any color background so that the image does not look out of place.

Another great vector clip art resource (royalty free & public domain) A Honey Bear Playhouse tip... (images and clip art that already have a transparent background)

It's best to reduce the size of the images for a visually aesthetic cursor trail. See my bee here set to 50x45 pixels

In the code that is provided by Javascript kit you will find the following line:

trailimage=["test.gif", 100, 99] //image path, plus width and height

You can see how I changed the code to reflect the location and size of my bee.

trailimage=["resources/small_bee_cursor.gif", 50, 45] //image path, plus width and height

Do the same to reflect your image and image size and it will work just fine. ;)

In the code that is provided by Javascript kit you will find the following line:

offsetfrommouse=[10,-20] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset

Play around with the two numbers until your image is in the proper relationship to your cursor and you are pleased with the location.

Happy site building
Ed

You can find me with my head in the honey pot here...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Ed! :)
Photo of Kay

Kay

  • 6 Posts
  • 0 Reply Likes
Hi Ed,

Thank you very much for your explanation in detail. I love your website too!

I'll read through it, and try it out. I'll get back to you if I still can't figure it out.. :P haha

Thank you !!
Photo of Kay

Kay

  • 6 Posts
  • 0 Reply Likes
Hi Ed,

I just tried it, and worked perfectly!!!

Thank you!!!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great to hear that you were able to use Ed's suggestion!
Photo of Guido Graphics

Guido Graphics

  • 7 Posts
  • 0 Reply Likes
Ed, you rock, brah! check it...
http://www.surgeryforrobin.com/