Author Topic: html/xhtml/css? cursor help (Read 1072 times)

sorrel · January 04, 2016, 03:37:21 PM

I was inspired by this page https://www.reddit.com/r/ooer to use the gawdawfull sock cursor as a default cursor for all of my web page class assignments. Main thing is how do I add a custom cursor in html? What I tried doesn't seem to be working. Also, how would I go about getting that cursor from the reddit site or at least a screenshot of it so I can edit it and turn it into a .cur/.ani file?

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Cursor Test</title>

<style type="text/css">

body{
  cursor: url('cursor/sock.cur'), auto;
        }
</style>

    </head>

    <body>
    <p>Hello worl</p>
    </body>

  </html>

also the sock.cur that im using here is a sock image that i found, resized to 128x128, deleted the background, saved as a png and renamed it to sock.cur

Ad Bot · Advertisement

ZSNO · January 04, 2016, 04:00:23 PM

You can't just rename an image from .png to .cur and expect it to work.
.cur is a different format, hence why it uses .cur

sorrel · January 04, 2016, 04:08:30 PM

Quote from: ZSNO on January 04, 2016, 04:00:23 PM

You can't just rename an image from .png to .cur and expect it to work.
.cur is a different format, hence why it uses .cur

even if I go to the properties of it and change the file type to .cur?

If not, whats the proper way to do it?

Foxscotch · January 04, 2016, 04:42:04 PM

Quote from: sorrel on January 04, 2016, 04:08:30 PM

even if I go to the properties of it and change the file type to .cur?

that's just a file extension, it doesn't really change anything except what program windows will probably use to open the image

open the image in GIMP, then save it as a .cur file from there, and it might work. assuming GIMP does cursors. it probably does. but it might not

sorrel · January 04, 2016, 05:06:52 PM

Quote from: Foxscotch on January 04, 2016, 04:42:04 PM

that's just a file extension, it doesn't really change anything except what program windows will probably use to open the image

open the image in GIMP, then save it as a .cur file from there, and it might work. assuming GIMP does cursors. it probably does. but it might not

just tried gimp, it doesn't. I wonder what else I could try
edit: tried paint.net was able to save as .cur but its still not showing up on the page

Foxscotch · January 04, 2016, 05:11:50 PM

yeah, just use a png image. I should've thought about this earlier but you don't have to use a specific file format
I just set zsno's avatar as the cursor for this page so. yeah. just use the png

sorrel · January 04, 2016, 05:16:46 PM

Quote from: Foxscotch on January 04, 2016, 05:11:50 PM

yeah, just use a png image. I should've thought about this earlier but you don't have to use a specific file format
I just set zsno's avatar as the cursor for this page so. yeah. just use the png

like this?

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Cursor Test</title>

<style type="text/css">

body{
  cursor: url('cursor/sock32x32.png'), auto;
        }
</style>

    </head>

    <body>
    <p>Hello worl</p>
    </body>

  </html>

Foxscotch · January 04, 2016, 05:20:30 PM

assuming there's a folder in the same location as the HTML file, named "cursor", with an image named "sock32x32.png" in it, that should work

sorrel · January 04, 2016, 05:46:20 PM

Quote from: Foxscotch on January 04, 2016, 05:20:30 PM

assuming there's a folder in the same location as the HTML file, named "cursor", with an image named "sock32x32.png" in it, that should work

I'm a dingus, since it was all in the same folder I deleted the cursor part of the file path and it showed up finally!

So, now how do I apply it so it shows up over the whole web page?

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Cursor Test</title>

<style type="text/css">

body{
  cursor: url('128.png'), auto;
        }
</style>

    </head>

    <body style="cursor: url('128.png')">
    <p>Hello worl</p>
    </body>

  </html>

I feel like i'm not doing this right

Foxscotch · January 04, 2016, 06:00:40 PM

Quote from: sorrel on January 04, 2016, 05:46:20 PM

So, now how do I apply it so it shows up over the whole web page?
I feel like i'm not doing this right

what do you mean? does it not show up at all?

sorrel · January 04, 2016, 06:06:36 PM

Quote from: Foxscotch on January 04, 2016, 06:00:40 PM

what do you mean? does it not show up at all?

it only shows up when I hover over text like the <p>hello worl</p> i'm curious to see if its possible to for it to show up over the whole page, white space included

Foxscotch · January 04, 2016, 06:13:03 PM

Quote from: sorrel on January 04, 2016, 06:06:36 PM

it only shows up when I hover over text like the <p>hello worl</p> i'm curious to see if its possible to for it to show up over the whole page, white space included

that's kinda weird
hmm... remove the style bit from the actual body element? like, just keep it in the style element, not in <body>
the problem might be there. you don't have the fallback set to auto in that one, which is required. the stuff inside the style element looks fine, though

sorrel · January 04, 2016, 06:22:31 PM

Quote from: Foxscotch on January 04, 2016, 06:13:03 PM

that's kinda weird
hmm... remove the style bit from the actual body element? like, just keep it in the style element, not in <body>
the problem might be there. you don't have the fallback set to auto in that one, which is required. the stuff inside the style element looks fine, though

Removed it from the <body> element. Still does the same thing. Could I see what you typed when you used the avatar as a cursor?

Foxscotch · January 04, 2016, 06:28:12 PM

body { cursor: url('http://forum.blockland.us/avatarUpload/avatar_10721.png'), auto; }

it doesn't change it for links or text input areas, though. you'll have to set the cursor specifically for those elements as well, if you want them changed

and I have realized, if your page has empty space that isn't an element, at the bottom, like if you just have one paragraph element, everything below the end of it is not technically part of the "body"
changing the selector from body to html should fix that. it did when I tested it

sorrel · January 04, 2016, 09:27:11 PM

I got it to work, thanks Foxscotch

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Cursor Test</title>

<style type="text/css">

html{
  cursor: url('128.png'), auto;
        }
</style>

    </head>

    <body>
    <p>Hello worl</p>
    </body>

  </html>

Heres my gawdawful sock pic i used for the cursor :^]