SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    custom mouse pointer

    Hi folks,

    Is it possible to create a custom mouse pointer based on an image in my images folder using javascript?

    Thanks in advance.

  2. #2
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about with CSS? Check this out: http://www.javascriptkit.com/dhtmltu...scursors.shtml
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  3. #3
    SitePoint Addict miggl's Avatar
    Join Date
    Feb 2007
    Location
    Los Angeles, CA
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to get overly complex, try this: http://www.webtoolkit.info/javascrip...om-cursor.html
    Celebrate Liberty, Freedom, and Rights at The Constitutionalist.

  4. #4
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to create a custom mouse pointer based on an image in my images folder using javascript?
    Yes it is. I won't write all the code for you (hiding img off page etc.) but it will definatley get you started.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{cursor:crosshair}
    #cur{
    position:absolute;
    left:0px;
    top:0px;
    }
    </style>
    <script type="text/javascript">
    function init()
    {
    document.onmousemove=func
    }
    function func(evt)
    {
    	evt?evt:evt=event
    	var cur=document.getElementById("cur")
    	cur.style.top=evt.clientY+"px"
    	cur.style.left=evt.clientX+"px"
    }
    </script>
    </head>
    
    <body onload="init()">
    <div id="cur">Put Img Here</div>
    </body>
    </html>

  5. #5
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much folks. I'm wondering about the cross-browser issues with this. Are there any major ones, or do they just need javascript turned on?

    I'm led to believe the use of css requires ie6+.

  6. #6
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just tried bals28mjk's idea. You can read my mind! Did you do that from scratch? It's very impressive indeed. The use I have in mind makes it very useful not to have it hiding off page. Thank you.
    Last edited by palgrave; Sep 6, 2007 at 14:41. Reason: spelt your man's user name wrong

  7. #7
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes from scratch your welcome and thanks for the compliment.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •