SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom Cursor Image?

    Hey all!

    I was wondering whether or not its possible to create a custom cursor image when mousing over certain links or fields of text.

    I know that you can change the cursor to a cross-hair, the wait cursor, etc. using CSS, but I haven't come across a method on using a custom image.

    Is this possible?

    Thx!

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Yes you can use your own cursor!
    Code:
    body {
       cursor: url('/icons/myIcon.cur');
    }
    Just change the URL to your needed path. You need a .cur file (you may be able to use a .ico file, I'm not sure). I know this works in IE4+ and Netscape 6+ (not sure of Opera or KHTML).

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Vinnie! I thought I'd be able to use a custom URL to point to an image, but I wasn't sure... I surely didn't think about the .ICO extension.

    An icon image can be done in any graphics application, can it not? Are there any special "requirements" needed to make one?


    Thanks again!

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I'm pretty sure you can do icons in most graphics apps.

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ikonified
    Are there any special "requirements" needed to make one?
    Right. You might want to check out this.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the resources!

    I've tried making my own Icon and .CUR file, and neither seem to work. This is the CSS code I'm using:

    Code:
    body{
    	cursor: url('d:/magicon.ico'), wait, help;
    }
    And I created a 32x32 ICO file. Is there something I'm missing?

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The file path has to be relative to your web server, not your actual file system. Something like "/images/magicon.ico" would work, but not "d:/magicon.ico".

  8. #8
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also note that I find them extremely annoying, and if you had one on your site, I'd probably never come back.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    The file path has to be relative to your web server, not your actual file system. Something like "/images/magicon.ico" would work, but not "d:/magicon.ico".
    Ahh! I thought it may have been that, but figured it would have worked on the local system as well (for testing purposes).

    So this won't work locally at all? The app/site is going to be saved on CD and distributed... Are there any other alternatives?

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Lange
    Also note that I find them extremely annoying, and if you had one on your site, I'd probably never come back.
    Hey Jeff,

    I agree 100%! In fact, nothing bothers me more than that...

    Actually, this is for a custom application that's being built, so it's a requirement, and not a preference. Don't ask! LOL

    PS: Serenity now!

  11. #11
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh ok, well in that case, I can understand.

    You can still use relative paths on a CD, just put the cursor in the same folder, and use:

    Code:
    cursor:url(cursor.ico);
    or if it's in a subfolder, use

    Code:
    cursor:url(folder/cursor.ico);

    I've never used it, so I'm not sure if .ico will work, it might only accept .cur.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Lange
    Oh ok, well in that case, I can understand.

    You can still use relative paths on a CD, just put the cursor in the same folder, and use:

    Code:
    cursor:url(cursor.ico);
    or if it's in a subfolder, use

    Code:
    cursor:url(folder/cursor.ico);

    I've never used it, so I'm not sure if .ico will work, it might only accept .cur.
    Alright,

    It still doesn't seem to want to work for me... I've modified the code to use:

    Code:
    body{ cursor: url('magglass.cur'), wait; }
    Now, according to the W3C site, if the first cursor specified cannot be read/used, it will use the next cursor specified in the list (in this case, wait). But when I load up my page, neither of the two are used.

    I'm not sure if the code has to be inline or embedded... as it is now, the stylesheet is external.

    I've tried both .ICO and .CUR files. Any other ideas?

    Thanks again!

  13. #13
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you create a ico or cur file?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •