473,654 Members | 3,096 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Using JavaScript to Customize Mouse Pointer Graphic??


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!
Jun 27 '08 #1
13 2197
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/
Jun 27 '08 #2
On Apr 20, 10:34 am, Martin Honnen <mahotr...@yaho o.dewrote:
>

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! =(
Jun 27 '08 #3
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/
Jun 27 '08 #4
On Apr 20, 1:29 pm, Martin Honnen <mahotr...@yaho o.dewrote:
>

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/
Jun 27 '08 #5

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...we ll,
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!!

?!?!?!
Jun 27 '08 #6
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...we ll,
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
Jun 27 '08 #7
On Apr 21, 4:31 am, Gregor Kofler <use...@gregork ofler.atwrote:
>

(a) This has nothing to do with JS.
True -- but having asked on comp.lang.javas cript 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.gregorkof ler.at::: Landschafts- und Reisefotografie http://web.gregorkofle r.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum
Jun 27 '08 #8
Prisoner at War wrote:
On Apr 21, 4:31 am, Gregor Kofler <use...@gregork ofler.atwrote:
>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
Jun 27 '08 #9
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
Jun 27 '08 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
4357
by: Eric Adem | last post by:
I have a JavaScript routine that runs on a timer and updates the position of a background image using the CSS background-position property. In Internet Explorer, it changes the mouse pointer to an hourglass when it refreshes the screen, and this is really annoying since it happens on the timer, about every 100 milliseconds or so. Is there anything I can do about this? Thank you very much. -Eric
9
22739
by: punkin | last post by:
I am trying to catch mouse position on the entire screen by dynamically generating mouse click event at every 100 ms. My code only works for IEs but not any Netscape or Gecko-based browsers. The following are the problems and I hope that there is someone who can enlighten me or give me some pointers. Also, my testing code is attached at the end. And please don't ask me why I am doing this - it is one of functional requirements by all...
4
9044
by: Videos 4 Sale | last post by:
Would you know how to change the look of a mouse pointer on a web page. On the page I have the mouse pointer is exactly as I have at work.... white. But what I want to do is change the look of it so that the people who visit the web page see a neon arrow (example) as opposed to what they see now (which is the white arrow) Any Ideas? Its driving me batty. Many thanks
15
1508
by: Dave | last post by:
I have a page that, when invoked, it runs a while (~ 15 seconds), then displays a DataGrid control. What I want to accomplish is to have the mouse pointer go to 'wait', then after the control displays, return to 'default'. What happens is the SetWaitPointer() routine changes the cursor to 'wait', but before the data grid is displayed on the page, 'SetDefaultPointer()' runs and changes the cursor back to 'default'. This happens about 3...
1
4162
by: Stefan Mueller | last post by:
With the following code I can change the mouse pointer. However, if you click in Mozilla (with IE it works perfect) on 'Show hourglass' the mouse pointer changes only if you move the mouse at least on pixel. <html> <body> <script type = 'text/javascript'> function show_hourglass() { document.getElementById("my_href1").style.cursor = "wait"; document.getElementById("my_href2").style.cursor = "wait";
1
1891
by: sharma1985 | last post by:
Hi all, I m worhing on creating an user intractive scatter graph images which contains thousands of points on it. So,I would like to know that how could i display the coordinates of every point on a scatter graph using javascript, when user mves their mouse pointer over each point shown in the graph. i also want to know that can i fetch information regarding each point directly from the my database tables when i moves mouse over the...
2
2723
by: remya1000 | last post by:
i'm using VB.NET. when a button is clicked the utility will display an hour glass mouse pointer, and it will begin copying the Utility settings from one computer to another computer on the network. Upon completion of these steps, the mouse pointer will return to it’s default style and the program will exit. any one have any idea how to display a Hour Glass Mouse Pointer? and when that settings starts coping to another computer, how can we...
1
1974
by: vsvnmurthy | last post by:
Hai , When i am trying to load an image using javascript popup window(same dimensions of image), the status bar and Mouse pointer showing continuous loading even though image loaded. How can i fix this problem? please answer if any one has the solution. My window creation syntax function mwindow(w,h) { table = table.window.open("","a","top=10,"left=10,width=500,height=500"); and so on..
7
2701
by: Gregor Kofler | last post by:
Prisoner at War meinte: (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. Small wonder...
0
8290
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8815
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
7307
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6161
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5622
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4294
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2716
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1916
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1596
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.