Using JavaScript to Customize Mouse Pointer Graphic??

[Prisoner at War]

I know about the * * style="cursor: pointer; cursor: hand;" * *
attribute of the <imgtag, but is there a way JavaScript can "load
in" one's own graphic for such events??

How?
TIA!

[Martin Honnen]

Prisoner at War wrote:

I know about the * * style="cursor: pointer; cursor: hand;" * *
attribute of the <imgtag, but is there a way JavaScript can "load
in" one's own graphic for such events??

CSS allows
cursor: url(some-cursor.file);
I think but I don't know about supported file formats and browser
support for that feature: http://www.w3.org/TR/CSS21/ui.html#cursor-props
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Prisoner at War]

On Apr 20, 10:34 am, Martin Honnen <[e-mail]:

>

CSS allows
cursor: url(some-cursor.file);
I think but I don't know about supported file formats and browser
support for that feature:http://www.w3.org/TR/CSS21/ui.html#cursor-props

--

Martin Honnen
http://JavaScript.FAQTs.com/

Hmm, I'm using

style="cursor: url(db2.gif);"

within an <imgtag and it's not working...any idea what I've left
out??

Thanks for the w3.org link -- but I don't have the technical
background yet to really make sense of the reference entry there! =(

[Martin Honnen]

Prisoner at War wrote:

Hmm, I'm using

style="cursor: url(db2.gif);"

within an <imgtag and it's not working...any idea what I've left
out??

As I said, I don't know of browser support for that feature, the IE
documentation suggests that IE 6 and later support the url feature for
..cur and .ani cursor files:
<http://msdn2.microsoft.com/en-us/library/aa358795(VS.85).aspx>

And I think the W3C wants you to specify a list of at least one URL plus
a backup e.g.
cursor: url(cursor1.cur), auto;
so that the cursor is defined even if url is not supported.

Here is an example that works with IE 6:
http://samples.msdn.microsoft.com/wo...s/cursor_c.htm

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Prisoner at War]

On Apr 20, 1:29 pm, Martin Honnen <[e-mail]:

>

As I said, I don't know of browser support for that feature, the IE
documentation suggests that IE 6 and later support the url feature for
.cur and .ani cursor files:
<http://msdn2.microsoft.com/en-us/library/aa358795(VS.85).aspx>

I think it must be something I'm not doing...doesn't work in MSIE 7,
neither...what am I missing? Let's see...

style="cursor: url(db2.gif);"
For "url" am I supposed to put a pathname? Everything is offline
right now...

style="cursor:../images(db2.gif);"
No matter if I use absolute or relative paths, that doesn't work in
any browser. I think I'm not using the format correctly, but I don't
know where I'm doing something wrong.

And I think the W3C wants you to specify a list of at least one URL plus
a backup e.g.
cursor: url(cursor1.cur), auto;
so that the cursor is defined even if url is not supported.

Here is an example that works with IE 6:http://samples.msdn.microsoft.com/wo...or/dhtml/refs/...

FANTASTIC!!

Strange thing, though...using IE 7 (does *not* work in FF or Opera),
only Cursor #1 works; Cursor #2 is like a dead link or something;
nothing happens, no change in mouse pointer graphic...guess they
forgot to load up an image file or something!

OMG, I can't believe MSIE is more W3C-compliant than FF and Opera!!
LOL!!

Oddly enough, I can't apply my own graphic for some reason...are the
files supposed to end in ".cur" for some reason?? I must be doing
something wrong in how I'm telling the browser to "use *this*
file"....

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Prisoner at War]

Strange news!!

First of all, I was indeed incorrect in my usage. For the record,
proper usage is

style="cursor: url(relative/path/file.ani);"
The relative path goes in the parentheses, and it *must* point to
a .ani or .cur file. I was using a .gif as a test file originally,
but that simply *cannot* work, ever.

However, the really odd thing is that you cannot use a "fall-back"
like

style="cursor: url(relative/path/file.ani); cursor:pointer;"
as is recommended, in case the browser didn't understand...well,
nothing worked in MSIE 7 until I had *removed* that "fall-back,"
"cursor:pointer"!

So

style="cursor: url(relative/path/file.ani); cursor:pointer;"
doesn't work, even in MSIE 7, but

style="cursor: url(relative/path/file.ani);"
does!

So, the custom pointer can only show up in MSIE 7, but only if the
"fall-back" hand pointer used by Opera and Firefox isn't present --
else MSIE 7 "prefers" it and uses it, instead of the custom pointer!!

?!?!?!

[Gregor Kofler]

Prisoner at War meinte:

However, the really odd thing is that you cannot use a "fall-back"
like

style="cursor: url(relative/path/file.ani); cursor:pointer;"

(a) This has nothing to do with JS.
(b) This is not a fallback. You just overwrite your custom-pointer
property with the standard one. In your case you will *always* get a
cursor: pointer.

as is recommended, in case the browser didn't understand...well,
nothing worked in MSIE 7 until I had *removed* that "fall-back,"
"cursor:pointer"!

Small wonder...

style="cursor: url(relative/path/file.ani); cursor:pointer;"

doesn't work, even in MSIE 7, but

style="cursor: url(relative/path/file.ani);"
does!

So, the custom pointer can only show up in MSIE 7, but only if the
"fall-back" hand pointer used by Opera and Firefox isn't present --
else MSIE 7 "prefers" it and uses it, instead of the custom pointer!!

How about
(a) obtaining some *basic* knoledge of css
(b) post into newsgroups dealing with those issues

x'post and f'up set

Gregor

--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

[Prisoner at War]

On Apr 21, 4:31 am, Gregor Kofler <[e-mail]:

>

(a) This has nothing to do with JS.

True -- but having asked on comp.lang.javascript about using
JavaScript, it's the answer I got. I now realize -- in less than a
day of research! -- that it's CSS, but I appreciate the answer all the
same.

(b) This is not a fallback.

So what's a fall-back, then?

You just overwrite your custom-pointer
property with the standard one. In your case you will *always* get a
cursor: pointer.

I thought I was simply following the instructions on something like
http://www.quirksmode.org/css/cursor.html....

Small wonder...

Actually, it's a real puzzle how MSIE 7 is more W3C-compliant over
this little thing than Opera and even Firefox!

How about
(a) obtaining some *basic* knoledge of css

I've got enough to customize existing CSS files for my own needs.
That seems "basic" enough to me.

Moreover, I just don't think a newsgroup should be an invitation-only
symposium. This is the information superhighway -- new drivers get on
the road all the time.

(b) post into newsgroups dealing with those issues

I have been, actually, even if unbeknownst to you.

x'post and f'up set

?

Gregor

--http://photo.gregorkofler.at::: Landschafts- und Reisefotografiehttp://web.gregorkofler.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum

[Jonathan N. Little]

Prisoner at War wrote:

On Apr 21, 4:31 am, Gregor Kofler <[e-mail]:

>You just overwrite your custom-pointer
property with the standard one. In your case you will *always* get a
cursor: pointer.

I thought I was simply following the instructions on something like
http://www.quirksmode.org/css/cursor.html....

>Small wonder...

Actually, it's a real puzzle how MSIE 7 is more W3C-compliant over
this little thing than Opera and even Firefox!

Eh? How to get that? Firefox does support 'hand'. 'hand' is a MS
invention. IE7 does not support 'url' or other graphic formats which is
part of the W3 recommendation. If graphic is use FF for does require a
generic fallback but this too is in keeping with the recommendation:
"The user agent retrieves the cursor from the resource designated by the
URI. If the user agent cannot handle the first cursor of a list of
cursors, it should attempt to handle the second, etc. If the user agent
cannot handle any user-defined cursor, *it must use the generic cursor
at the end of the list.*"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Bart Van der Donck]

Jonathan N. Little wrote:

Eh? How to get that? Firefox does support 'hand'. 'hand' is a MS
invention. IE7 does not support 'url' or other graphic formats which is
part of the W3 recommendation.

IE7 should support 'url'; the question is the format of the graphic
file that represents the custom cursor.

If graphic is use FF for does require a generic fallback but this too
is in keeping with the recommendation:

"The user agent retrieves the cursor from the resource designated by the
URI. If the user agent cannot handle the first cursor of a list of
cursors, it should attempt to handle the second, etc. If the user agent
cannot handle any user-defined cursor, *it must use the generic cursor
at the end of the list.*"

I think this is the best rule of thumb in practice indeed:

cursor: url('cursor.cur'), url('cursor.ani'),
url('cursor.png'), url('cursor.svg'), auto;

In conjunction with a great image converter like:
http://www.irfanview.com

A strange remark from W3:
http://www.w3.org/TR/SVG/interact.html#CursorElement

| A recommended approach for defining a platform-independent
| custom cursor is to create a PNG [PNG01] image [...]

I couldn't get PNG01 to work at least on MSIE. But then, even their
own demo on MSDN doesn't seem to work here (Vista MSIE 7.0.6., second
button '#2'):
http://samples.msdn.microsoft.com/wo...s/cursor_c.htm

--
Bart

[Prisoner at War]

On Apr 21, 11:54 am, Bart Van der Donck <[e-mail]:

>
IE7 should support 'url'; the question is the format of the graphic
file that represents the custom cursor.

Indeed it does; I've been able to confirm that.

I think this is the best rule of thumb in practice indeed:

cursor: url('cursor.cur'), url('cursor.ani'),
url('cursor.png'), url('cursor.svg'), auto;

Yup -- that's the one! Opera 9 won't see any URI, but FF and MSIE can
have their pick of which file format to load!

In conjunction with a great image converter like:http://www.irfanview.com

How about GIMP?? Looks really powerful...it may be all I'll ever
need! I wonder if it does cursors (.ani, .cur), though...any 100%
free cursor creation programs you know of -- without spy/malware??

A strange remark from W3:http://www.w3.org/TR/SVG/interact.html#CursorElement

| A recommended approach for defining a platform-independent
| custom cursor is to create a PNG [PNG01] image [...]

Well! Is that true??

And what's PNG01?? Is that also .png or does it end .png01??

I couldn't get PNG01 to work at least on MSIE. But then, even their
own demo on MSDN doesn't seem to work here (Vista MSIE 7.0.6., second
button '#2'):http://samples.msdn.microsoft.com/wo...or/dhtml/refs/...

LOL, yeah, Martin Honnen had referenced that, I think, and I'd also
noted that Button #2 doesn't work!

--
Bart

[Bart Van der Donck]

Prisoner at War wrote:

Bart Van der Donck <[e-mail]:

>...
In conjunction with a great image converter like:
http://www.irfanview.com

How about GIMP?? *Looks really powerful...it may be all I'll ever
need! *

GIMP might be okay too, but I'm a bit afraid of cursors, and in
particular the favoured Windows formats.

I wonder if it does cursors (.ani, .cur), though... any 100%
free cursor creation programs you know of -- without spy/malware??

I have been using IrfanView for many years. It has been certified by
www.download.com as "Tested spyware free"; you may want to check the
Spyware listings further at wish.

>A strange remark from W3:
http://www.w3.org/TR/SVG/interact.html#CursorElement

>* | A recommended approach for defining a platform-independent
* | custom cursor is to create a PNG [PNG01] image [...]

Well! *Is that true??

"True" is a bit relative here :) The PNG-format is heavily promoted by
the W3C; no surprise they mention it here.

And what's PNG01?? *

http://www.google.com/search?q=png
http://en.wikipedia.org/wiki/Portabl...nd_development
http://www.ietf.org/rfc/rfc2083.txt

Is that also .png or does it end .png01??

png.

--
Bart

[Jonathan N. Little]

Prisoner at War wrote:

On Apr 21, 2:44 pm, Gregor Kofler <[e-mail]:

>And you should know the difference between "font-family:
Arial, Verdana;" and "font-family: Arial; font-family: Verdana;".

Actually, verdana and arial look extremely similar.

No, you are missing the point, noting to do with Arial or Verdana but
the CSS rule syntax.

..correct { font-family: foo, bar; }
..wrong {font-family: foo; font-family: bar; }

Classes "correct" and "wrong" are *not* equivalent. "correct" rule say
use font "foo" but if foo is not available use "bar". But "wrong" sets
the font to "foo" and then changes it to call out font "bar". With class
"wrong" the font will never be "foo".

>A-ha. So what's the JS issue of your problem?

I was asking about how to use JavaScript to customize mouse pointers.
Turns out the answer I got concerned using CSS, but at the time I did
not know that and so just "ran" with the answer.

Agree, not the place for JS...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[John Hosking]

On Tue, 22 Apr 2008 07:23:07 -0700 (PDT), Prisoner at War wrote:

On Apr 21, 2:44 pm, Gregor Kofler wrote:

>And you should know the difference between "font-family:
Arial, Verdana;" and "font-family: Arial; font-family: Verdana;".

Actually, verdana and arial look extremely similar.

Sure, if you compare them one isolated letter at a time.
Also (and mostly), what Jonathan said.

>I could also point out, that you shouldn't quote signatures. But I
suppose one has to be happy, that you're not top-posting.

This is really bizarre -- why not quote signatures??? Very, very
strange rules...I mean, why do people have signatures to their posts
if they don't want their signatures quoted??

Three reasons not to quote signatures:

1) You've already got the attribution lines up at the top, so there's no
need to quote the sig, too.

2) Some people's sigs are rather long. Go look at threads with (a lot of)
posts from Jerry Stuckle in them. He often gets in very long back-and-forth
discussions with users of GoogleGroups, and GG doesn't automatically trim
sigs from replies, and GG users don't know any better, and Jerry's too lazy
(or something) to trim out previous sigs (or other irrelevant content), and
his sparring partners don't do it either. But other sigs, longer and
shorter, are unnecessary for quoting. We waste enough bandwidth already.

3) You're not commenting on the sig (well, except in the very rare case
that you *are*), so it should be trimmed like all of the other points to
which you are not directly replying.

I don't mind if you quote *my* signature, but nobody else (except maybe a
shark or two) will be too happy about it.

--
John
Read about the UIP: http://improve-usenet.org/