htmlcsscustom-cursor

How to fix custom HTML cursor issue on a web page?

I'm developing an innovative app to protect user passwords. It's an award winning system called GATE [ you can read about it on the following site if you are interested ], and I need to have a custom cursor when I enter my info.

When I get to a login screen, it will show me a table with multiple buttons in it. Each button has 4 symbols on it. I can click the buttons to enter my pin. In order not to expose which symbol I'm clicking on, I need a custom cursor to mask the symbols on the button.

But I have the following 2 problems:

  1. The custom cursor sometimes don't show up, how to make it always show up especially when it's over a button.

  2. The mouse is positioned at the upper left corner of the custom cursor, how to position the mouse to the center of the custom cursor ?

My HTML code looks like this:

<Head>
  <Title>GATE_Servlet</Title>
<style>.Tokens_Table {cursor: url(Cursor_Crosshair.cur),url(Cursor_Select.cur),url(Cursor_Empty.cur),auto;}</style>
</Head>

<Body BgColor=#C6DAFA>

<Center>
<P><Br>
<Div class="Tokens_Table">
<Table Border=0 Cellspacing=10 Cellpadding=10>
  <Tr>
    <Td Align=Center><button id=Token_0_0 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>2</f></Td><Td Width=25 Align=Center><f>Ⓕ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☴</f></Td><Td Width=25 Align=Center><f>₠</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_0_1 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>25</f></Td><Td Width=25 Align=Center><f>δ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☾</f></Td><Td Width=25 Align=Center><f>$</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_0_2 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>30</f></Td><Td Width=25 Align=Center><f>α</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>♥</f></Td><Td Width=25 Align=Center><f>&</f></Td></Tr>  </Table></Center></button></Td>
  </Tr>
  <Tr>
    <Td Align=Center><button id=Token_1_0 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>23</f></Td><Td Width=25 Align=Center><f>π</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>◒</f></Td><Td Width=25 Align=Center><f>☣</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_1_1 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>37</f></Td><Td Width=25 Align=Center><f>Ⓢ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☷</f></Td><Td Width=25 Align=Center><f>⊂</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_1_2 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>50</f></Td><Td Width=25 Align=Center><f>β</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>△</f></Td><Td Width=25 Align=Center><f>☟</f></Td></Tr>  </Table></Center></button></Td>
  </Tr>
  <Tr>
    <Td Align=Center><button id=Token_2_0 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>15</f></Td><Td Width=25 Align=Center><f>ο</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>♂</f></Td><Td Width=25 Align=Center><f>✉</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_2_1 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>24</f></Td><Td Width=25 Align=Center><f>ψ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>♣</f></Td><Td Width=25 Align=Center><f>♨</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_2_2 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>47</f></Td><Td Width=25 Align=Center><f>λ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>◑</f></Td><Td Width=25 Align=Center><f>₩</f></Td></Tr>  </Table></Center></button></Td>
  </Tr>
</Table>
</Div>
<P>
...
</Body>
</Html>

The demo app is running at:

Before trying it, you need to know how it works first:

Solution

  • Since IE doesn't support [ x y ] parameter in the "cursor" specification, I came up with another solution as follows.

    I downloaded a software called "RealWorld Cursor Editor" from http://www.rw-designer.com/cursor-maker

    Converted my cursor .png file to a mouse cursor file, then set the hotspot in that cursor file to the center of the cursor, and saved that .cur file.

    Then used the following line in the html to use that .cur file [ which has a hotspot in the center ] :

    <style>
  .Tokens_Table { cursor: url(Cursor_Crosshair.cur),url(Cursor_Select.cur),url(Cursor_Empty.cur), auto; }
  button { cursor: inherit !important; }
</style>

    Now, it's working in all 3 major browsers : Firefox, IE & Chrome.

    You can try it at : https://gate-web.herokuapp.com/index.jsp