This question already has an answer here:

enter image description hereI want to create a customized cursor that will replace the existing mouse-pointer to a Static image that I have uploaded in the Static Resource. I tried doing it with a simple CSS as below:

<apex:page >
            cursor: url('!$Resource.CursorBee'), auto;

   <div id="homewrapper">
        <p><b>Coming Soon</b></p>

When I point the mouse over <p><b>Coming Soon</b></p> it does not change to the bee image. However, if I write <apex:image url="{!$Resource.CursorBee}" width="50" height="50"/> in the apex page body, it shows fine.

Please, let me know how may I change my mouse-pointer to a Static image.

marked as duplicate by Guy, Ratan Paul, Tushar Sharma, Adrian Larson, Vigneshwaran G Oct 20 '16 at 14:32

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • @Guy: I tried as per the thread you provided. But it didn't work. Here is what I did: Zipped my cursor file cursorbee.cur and made a MyResource.zip file. Uploaded the zip file as static resource. Finally wrote the code : cursor: url({!URLFOR($Resource.MyResource,'images/')}cursorbee.cur); Please advice... – Kamruzzaman Oct 20 '16 at 13:30
  • did you put it in an 'images' folder before zipping? (and did you zip the folder along?) – Guy Oct 20 '16 at 14:23
  • No, the folder name was MyResource. Now its working fine. Thanks for the reference :) – Kamruzzaman Oct 21 '16 at 13:03

Below code worked perfectly for me:

            cursor: url({!URLFOR($Resource.MyResource,'MyResource/')}cursorbee.cur), auto;
    </style> <body  id="homewrapper">    <div id="homewrapper">
        <p><b>Coming Soon..</b></p>
    <br />
    <apex:image url="{!URLFOR($Resource.MyResource, 'MyResource/cursorbee1.png')}" /> </body>     </apex:page>

Not the answer you're looking for? Browse other questions tagged or ask your own question.