Using JavaScript to Customize Mouse Pointer Graphic??
Prisoner at War
I know about the * * style="cursor: pointer; cursor: hand;" * *
attribute of the <img> tag, but is there a way JavaScript can "load
in" one's own graphic for such events??
How?
TIA!
Martin Honnen
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
>
>
> 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 <img> tag 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
> Hmm, I'm using
>
> style="cursor: url(db2.gif);"
>
> within an <img> tag 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/workshop/samples/author/dhtml/refs/cursor_c.htm
Prisoner at War
>
>
> 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/workshop/samples/author/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"....
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
> 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
>
>
> (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
> On Apr 21, 4:31 am, Gregor Kofler <use...@gregorkofler.at> wrote:
>> 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
> 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/workshop/samples/author/dhtml/refs/cursor_c.htm
--
Bart
Prisoner at War
>
> 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/workshop/samples/author/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
> Bart Van der Donck <b...@nijlen.com> wrote:
>
>> ...
>> 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/Portable_Network_Graphics#History_and_development
http://www.ietf.org/rfc/rfc2083.txt
> Is that also .png or does it end .png01??
png.
--
Bart
Gregor Kofler
> On Apr 21, 4:31 am, Gregor Kofler <use...@gregorkofler.at> wrote:
>>
>> (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?
cursor: url(...), pointer;
>> 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....
Sure. You've also noted, that it says:
"Since Explorer 6 and 7 support pointer, there's no more reason to use
hand, except when older Explorers are part of your target audience. In
that case, the only cross-browser syntax is...
...Note that the two declarations must be in this order."
(You see: It's only to provide "hand" for IE5 and 5.5, coz' they don't
know "pointer".)
>> 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.
Well, if you're past the "basic" level you should not need to ask "what
a fallback is". And you should know the difference between "font-family:
Arial, Verdana;" and "font-family: Arial; font-family: Verdana;".
>> (b) post into newsgroups dealing with those issues
>
> I have been, actually, even if unbeknownst to you.
A-ha. So what's the JS issue of your problem?
>> x'post and f'up set
>
> ?
Well, you're obviously knowledgeable (or perhaps ignorant) enough to
revert the f'up to x'post again.
>> Gregor
>>
>> --http://photo.gregorkofler.at::: Landschafts- und Reisefotografiehttp://web.gregorkofler.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum
>
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.
Anyway. f'up set.
Gregor
--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
Prisoner at War
>
> cursor: url(...), pointer;
Right, syntax error on my part.
> Sure. You've also noted, that it says:
>
> "Since Explorer 6 and 7 support pointer, there's no more reason to use
> hand, except when older Explorers are part of your target audience. In
> that case, the only cross-browser syntax is...
>
> ...Note that the two declarations must be in this order."
>
> (You see: It's only to provide "hand" for IE5 and 5.5, coz' they don't
> know "pointer".)
Yes. It all makes sense now, now that I know the proper syntax or
"grammar"...but the general concept I did get.
> Well, if you're past the "basic" level you should not need to ask "what
> a fallback is".
I did. It was a syntax error on my part. I knew what a fall-back was
but didn't implement it properly, syntax-wise.
> 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.
> 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.
> <SNIP>
>
> 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??
> <SNIP>
Jonathan N. Little
> On Apr 21, 2:44 pm, Gregor Kofler <use...@gregorkofler.at> 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.
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...
John Hosking
> 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/