Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: How to position an animated cursor

  1. #1
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Red face How to position an animated cursor

    I'm trying to put an animated cursor on this page: http://szuspehi.blogspot.bg/p/blog-page_16.html
    Unfortunately, gif moves down and to the right. It does not respond to the absolute positioning values.
    The second problem is how to hide the default cursor.
    This is the animated cursor code:
    HTML Code:
    <style type="text/css">
        .kisser {
          position:absolute;
          top:0;
          left:0;
          visibility:hidden;
        }
        </style>
    
        <script type="text/javascript">
    
        //Visit http://www.rainbow.arch.scriptmania.com for this script
    
        kisserCount = 1 //maximum number of images on screen at one time
        curKisser = 0 //the last image DIV to be displayed (used for timer)
        kissDelay = 1000000 //duration images stay on screen (in milliseconds)
        kissSpacer = 0 //distance to move mouse b4 next heart appears
        theimage = "http://www.souhssz.setra.icnhost.net/aj/ani.gif" //the 1st image to be displayed
        //Browser checking and syntax variables
        var docLayers = (document.layers) ? true:false;
        var docId = (document.getElementById) ? true:false;
        var docAll = (document.all) ? true:false;
        var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
        var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
        var stylebitK = (docLayers) ? "":".style"
        var showbitK = (docLayers) ? "show":"visible"
        var hidebitK = (docLayers) ? "hide":"hidden"
        var ns6=document.getElementById&&!document.all
        //Variables used in script
        var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
        lastX = 0
        lastY = 0
        //Collection of functions to get mouse position and place the images
        function doKisser(e) {
    
          posX = getMouseXPos(e)
          posY = getMouseYPos(e)
          if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
            showKisser(posX,posY)
            lastX = posX
            lastY = posY
          }
        }
        // Get the horizontal position of the mouse
        function getMouseXPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageX)
          } else {
            return (parseInt(event.clientX) + parseInt(document.body.scrollLeft))
          }
        }
        // Get the vartical position of the mouse
        function getMouseYPos(e) {
          if (document.layers||ns6) {
            return parseInt(e.pageY)
          } else {
            return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
          }
        }
        //Place the image and start timer so that it disappears after a period of time
        function showKisser(x,y) {
          var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
          if (curKisser >= kisserCount) {curKisser = 0}
          eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = '" + processedx + "px'")
          eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = '" + y + "px'")
          eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
          if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
            eval("clearTimeout(kissDelay" + curKisser + ")")
          }
          eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
          curKisser += 1
        }
        //Make the image disappear
        function hideKisser(knum) {
          eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
        }
    
        function kissbegin(){
        //Let the browser know when the mouse moves
        if (docLayers) {
          document.captureEvents(Event.MOUSEMOVE)
          document.onMouseMove = doKisser
        } else {
          document.onmousemove = doKisser
        }
        }
        </script>
    
    
        <script type="text/javascript">
        if (document.all||document.getElementById||document.layers){
        for (k=0;k<kisserCount;k=k+2) {
          document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
          
        }
        }
        kissbegin();
        </script>
    I'm glad if someone can help me

  2. #2
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    I "hid" the default cursor by replacing it with a transparent pixel:
    HTML Code:
    <style type="text/css">body, a, a:hover {cursor: url(https://lh3.googleusercontent.com/-wJWSIFL2g1Q/WX9Xpk_cC3I/AAAAAAAAGnQ/V93q3liReggMfnKJD6wl0vX7SdrxHZcPACLcBGAs/h120/1px.gif), progress;}</style>
    Now the only problem is how to position the cursor?

  3. #3
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    Other solutions do not work in all browsers. But why I can not move the animated image cursor?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (08-03-2017)

  6. #5
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    But I want the beauty of this cursor: Name:  ani.gif
Views: 48
Size:  5.5 KB

    PS: I think the code did not work temporarily. It is currently written correctly, as outlined on the first post. You will see the cursor but downward.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    * {cursor: none;}
    #anicursor {position: fixed; background-image: url(ani.gif); width: 32px; height: 32px; visibility: hidden; z-index: 10000;}
    </style>
    </head>
    <body>
    <div id="anicursor"></div>
    <script>
    document.addEventListener('mousemove', function(e){
    	var cur = document.getElementById('anicursor');
    	cur.style.visibility = 'visible';
    	cur.style.left = e.x + 'px';
    	cur.style.top = e.y + 'px';
    	}, false
    );
    </script>
    </body>
    </html>
    Last edited by jscheuer1; 08-02-2017 at 10:50 PM. Reason: remove margin, add z-index
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (08-03-2017)

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Here's a better version:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    * {cursor: none;}
    #anicursor {position: fixed; background-image: url(ani.gif); width: 32px; height: 32px; visibility: hidden; z-index: 10000; margin-left: 5px; margin-top: 5px;}
    </style>
    </head>
    <body>
    <div id="anicursor"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat, orci eget hendrerit imperdiet, dui velit pharetra odio, non ornare ipsum tortor vel nulla. Integer ultricies justo arcu, sit amet egestas nunc consequat at. Pellentesque pretium elit sit amet dapibus laoreet. Morbi nec rhoncus risus, id molestie massa. Aliquam sit amet porta tortor, in porta mauris. Duis condimentum velit tellus, vel consequat neque euismod vitae. Nunc quis erat a lectus placerat posuere. Sed feugiat cursus consectetur. In bibendum, erat at lacinia vestibulum, elit est fringilla velit, sit amet scelerisque dolor quam nec lorem.
    
    Phasellus at neque tincidunt, feugiat dui et, maximus lectus. Quisque tristique nisl in velit vehicula tincidunt. Quisque iaculis iaculis tellus, ac porttitor ex porta id. Maecenas sed erat iaculis, fringilla nibh sit amet, tempus arcu. Maecenas at nisl et enim iaculis fermentum in ullamcorper ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas condimentum ipsum eu risus blandit bibendum.
    
    Duis massa lectus, feugiat sit amet eros non, dignissim tristique nibh. Mauris eget tortor vehicula ante hendrerit egestas. Sed maximus sem eu commodo porta. Proin accumsan egestas dictum. Nunc ultrices ornare sollicitudin. Pellentesque ut turpis odio. Vestibulum cursus et orci sit amet consequat. Praesent imperdiet nisl quis turpis vehicula tempor.
    
    Morbi faucibus a orci sed aliquet. Integer finibus scelerisque odio auctor hendrerit. Donec risus sem, dictum ac interdum sit amet, efficitur et lacus. Donec id ipsum vel lorem feugiat suscipit ut sed leo. Proin porttitor nisi tortor, quis iaculis orci rutrum a. Nam mollis massa id leo rutrum, eu ornare ante cursus. Nunc imperdiet bibendum nisl, nec rutrum dui varius vitae.
    
    Maecenas et ullamcorper ipsum. Donec tincidunt posuere magna, eget sagittis turpis congue sit amet. Phasellus et venenatis elit, et feugiat est. Curabitur imperdiet blandit efficitur. Sed pulvinar convallis arcu eu mollis. Pellentesque interdum risus a commodo porttitor. Pellentesque tristique lorem vel nunc hendrerit, sed commodo arcu accumsan. Proin in nisi aliquet, egestas magna nec, luctus massa. Praesent in congue lorem, vitae tempus sem. Aliquam augue nibh, elementum eu lobortis vitae, dapibus vel tellus.</div>
    <a href="http://www.google.com/">Google</a>
    <script>
    document.addEventListener('mousemove', function(e){
    	var cur = document.getElementById('anicursor'), x = e.x, y = e.y, w = window;
    	cur.style.visibility = x < 2 || y < 2 || x >= w.innerWidth - 1 || y >= w.innerHeight - 1? '' : 'visible';
    	cur.style.left = x + 'px';
    	cur.style.top = y + 'px';
    	}, false
    );
    </script>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (08-03-2017)

  11. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Better still I think:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    * {cursor: none;}
    #anicursor {position: fixed; background-image: url(ani.gif); width: 32px; height: 32px; visibility: hidden; z-index: 10000; margin-left: 5px; margin-top: 5px;}
    </style>
    </head>
    <body>
    <div id="anicursor"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat, orci eget hendrerit imperdiet, dui velit pharetra odio, non ornare ipsum tortor vel nulla. Integer ultricies justo arcu, sit amet egestas nunc consequat at. Pellentesque pretium elit sit amet dapibus laoreet. Morbi nec rhoncus risus, id molestie massa. Aliquam sit amet porta tortor, in porta mauris. Duis condimentum velit tellus, vel consequat neque euismod vitae. Nunc quis erat a lectus placerat posuere. Sed feugiat cursus consectetur. In bibendum, erat at lacinia vestibulum, elit est fringilla velit, sit amet scelerisque dolor quam nec lorem.
    
    Phasellus at neque tincidunt, feugiat dui et, maximus lectus. Quisque tristique nisl in velit vehicula tincidunt. Quisque iaculis iaculis tellus, ac porttitor ex porta id. Maecenas sed erat iaculis, fringilla nibh sit amet, tempus arcu. Maecenas at nisl et enim iaculis fermentum in ullamcorper ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas condimentum ipsum eu risus blandit bibendum.
    
    Duis massa lectus, feugiat sit amet eros non, dignissim tristique nibh. Mauris eget tortor vehicula ante hendrerit egestas. Sed maximus sem eu commodo porta. Proin accumsan egestas dictum. Nunc ultrices ornare sollicitudin. Pellentesque ut turpis odio. Vestibulum cursus et orci sit amet consequat. Praesent imperdiet nisl quis turpis vehicula tempor.
    
    Morbi faucibus a orci sed aliquet. Integer finibus scelerisque odio auctor hendrerit. Donec risus sem, dictum ac interdum sit amet, efficitur et lacus. Donec id ipsum vel lorem feugiat suscipit ut sed leo. Proin porttitor nisi tortor, quis iaculis orci rutrum a. Nam mollis massa id leo rutrum, eu ornare ante cursus. Nunc imperdiet bibendum nisl, nec rutrum dui varius vitae.
    
    Maecenas et ullamcorper ipsum. Donec tincidunt posuere magna, eget sagittis turpis congue sit amet. Phasellus et venenatis elit, et feugiat est. Curabitur imperdiet blandit efficitur. Sed pulvinar convallis arcu eu mollis. Pellentesque interdum risus a commodo porttitor. Pellentesque tristique lorem vel nunc hendrerit, sed commodo arcu accumsan. Proin in nisi aliquet, egestas magna nec, luctus massa. Praesent in congue lorem, vitae tempus sem. Aliquam augue nibh, elementum eu lobortis vitae, dapibus vel tellus.</div>
    <a href="http://www.google.com/">Google</a>
    <script>
    document.addEventListener('mousemove', function(e){
    	var cur = document.getElementById('anicursor'), x = e.x, y = e.y, w = window;
    	cur.style.visibility = x > w.innerWidth - 2 || y > w.innerHeight - 2? '' : 'visible';
    	cur.style.left = x + 'px';
    	cur.style.top = y + 'px';
    	}, false
    );
    window.addEventListener('mouseout', function(e){
    	document.getElementById('anicursor').style.visibility = '';
    	}, false
    );
    </script>
    </body>
    </html>
    But you have to remember, whatever you do, this might be a problem on touch devices (though apparently not in my emulator). Oh, and for Firefox, add this to the style section:

    Code:
    html {height: 100%;}
    Last edited by jscheuer1; 08-02-2017 at 11:50 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. #9
    Join Date
    Jun 2011
    Posts
    60
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    It works perfectly. Thank you so much!

    P.S.: Is there a way when mouse point to a hyperlink to change cursor with another animated gif?
    Last edited by balki; 08-03-2017 at 11:12 AM.

  13. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Sure, replace the current script with this one:

    Code:
    <script>
    (function(){
    	var cur = document.getElementById('anicursor'), lcur = new Image();
    	lcur.src = 'ani2.gif'; // path to link cursor
    	document.addEventListener('mouseover', function(e){
    		var linktarget = e.target.tagName === 'A' || e.target.parentNode.tagName === 'A';
    		cur.style.backgroundImage = linktarget? 'url(' + lcur.src + ')' : '';
    		}, false
    	);
    	document.addEventListener('mousemove', function(e){
    		var x = e.x, y = e.y, w = window;
    		cur.style.visibility = x > w.innerWidth - 2 || y > w.innerHeight - 2? '' : 'visible';
    		cur.style.left = x + 'px';
    		cur.style.top = y + 'px';
    		}, false
    	);
    	window.addEventListener('mouseout', function(e){
    		cur.style.visibility = '';
    		}, false
    	);
    })();
    </script>
    Notice the highlighted line:

    Code:
    	lcur.src = 'ani2.gif'; // path to link cursor
    The red is where to put the path (if any) and filename to the link cursor.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  14. The Following User Says Thank You to jscheuer1 For This Useful Post:

    balki (08-03-2017)

Similar Threads

  1. Cursor position in designMode IFrame
    By Jas in forum JavaScript
    Replies: 18
    Last Post: 05-08-2009, 08:37 PM
  2. Cursor Position
    By sugan in forum CSS
    Replies: 0
    Last Post: 07-16-2007, 09:30 AM
  3. Changing the cursor position using JavaScript
    By codeexploiter in forum JavaScript
    Replies: 1
    Last Post: 02-13-2007, 09:05 AM
  4. How to get cursor's position in textarea
    By costas in forum JavaScript
    Replies: 3
    Last Post: 02-03-2007, 08:32 AM
  5. Insert text in cursor(keyboard) position.
    By shachi in forum JavaScript
    Replies: 5
    Last Post: 09-09-2006, 02:59 PM

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
  •