Hiding the mouse cursor in Internet Explorer

Yesterday I had a deadline race for sweeping up a web application that would run some movie trailers, navigate through a set of menus and browse a mock movie repository. I had written most of the code during Summer already, but as it happened, there was a bit of change regarding the look and feel of the menu system; a 2D move-in-all-directions kind of layout being switched for a 1D navigate-up-and-down-this list. It was for the better, interface usability wise, and as it turned out, my code was already made smart enough for the only needed change to read "cols = cols || 1" where before there was "cols = cols || 3". (It was truly a beautiful moment, realizing that.)

Anyway, it's a set top box interface navigated by remote control, and though it's a web application technically, we don't want to bother the user with that particular bit of needless technical cruft, and most of all we don't want to prompt her with an ugly mouse pointer she has very little use for. So, we turn to CSS, browsing what you can do with the cursor declaration. Okay, not much, as turning it off all together goes. Sane for a web environment -- inconvenient that it does not solve our problem. So at the time, we settled for making the cursor smaller (the crosshair, to be quite precise). And it sucked.

Enter Internet Explorer embrace and extend non-standard additions to the CSS cursor attribute, for once very nearly in the spirit of the standard, cursor:url('my cursor');. I say very nearly, for while the code certainly looks the way CSS should, it's not quite that good. We can't point it to our SVG, PNG or even GIF image and have it appear as the mouse pointer, though we can use "common" Windows mouse pointer files, *.cur or even the horrible animated ones, *.ani. Just don't ask me what program can edit, or much less create, them, where the format is defined and standardized.

As it turns out, though, editing them in Emacs isn't much of a hassle. Find a cursor file somewhere (I picked the text editing cursor), M-x hexl-find-file it, and lo! You will see the pixels quite clearly, each hex nibble (four bits each) being a colour. 0 for the transparent parts, F for the black, I believe. Replace all those 0F, F0 and FFs with 00s and save your brand new, blank, empty, fully transparent cursor.

And presto! It works. Internet Explorer kindly hides the cursor when hovering the element we equipped with the cursor declaration. (Try hovering this paragraph.)

And that was that. I just felt like sharing, so maybe the next guy who has the same sad problem to solve will have better google karma than I did back in July when the issue reared its ugly head initially.

Categories:

• IE
• howto