Changing CSS URL for pointer cursor (using Javascript) -
i asked question yesterday here having cursor changes regularly using javascript, make animated. got great answer (thank shiva!). i've been trying 2 different 'animated' cursors, 1 'auto' cursor, , different 1 'pointer' cursor.
i tried lots of different ways, can't work out (i must admit, i'm new - trying improve). here's 1 of ways tried it:
<!doctype html> <html> <head> <script type = "text/javascript"> var images = [ 'assets/shared/cursors/drum1.cur', 'assets/shared/cursors/drum2.cur', 'assets/shared/cursors/drum3.cur', 'assets/shared/cursors/drum4.cur' ]; var x = 0; function displaynextimage() { x = (x === images.length - 1) ? 0 : x + 1; document.body.style.cursor = 'url("' + images[x] + '"), default'; } setinterval(displaynextimage, 250); </script> <script type = "text/javascript"> var images = [ 'assets/shared/cursors/point1.cur', 'assets/shared/cursors/point2.cur', 'assets/shared/cursors/point3.cur', 'assets/shared/cursors/point4.cur' ]; var x = 0; function displaynextimage() { x = (x === images.length - 1) ? 0 : x + 1; document.body.style.cursor:pointer = 'url("' + images[x] + '"), default'; } setinterval(displaynextimage, 250); </script> <body> <div style="height: 1000vh; width: 1000vw;"></div> </body> </html> </head> </html> if possible i'd without jquery.
again, appreciated.
thanks! :)
you can try using jquery :
var images = [ 'assets/shared/cursors/point1.cur', 'assets/shared/cursors/point2.cur', 'assets/shared/cursors/point3.cur', 'assets/shared/cursors/point4.cur' ]; var x = 0; function changelinkcursorhoverbinding(){ $("a").hover(function(){/*this mouseenter triggered function*/ $(this).css("cursor",'url("' + images[x] + '"), default'); }, function(){ //handle mouseleave here if needed }); x = (x === images.length - 1) ? 0 : x + 1;//put @ end start @ 0 settimeout(changelinkcursorhoverbinding, 250); } $(document).ready(changelinkcursorhoverbinding);//initial call of function edit
or without jquery :
var images = [ 'assets/shared/cursors/point1.cur', 'assets/shared/cursors/point2.cur', 'assets/shared/cursors/point3.cur', 'assets/shared/cursors/point4.cur' ]; var x = 0; function changelinkcursorhoverbinding(){ var elems = document.queryselectorall("a"); elems.removeeventlistener("mouseenter", onhover); elems.removeeventlistener("mouseleave", offhover); elems.addeventlistener("mouseenter", onhover); elems.addeventlistener("mouseleave", offhover); x = (x === images.length - 1) ? 0 : x+1; settimeout(changelinkcursorhoverbinding, 250); } function onhover(){ var elems = document.queryselectorall("a"); for(e in elems){ e.style.cursor = "url('" + images[x] + "'), default"; }//you can use regular loop here if wanna } function offhover(){ var elems = document.queryselectorall("a"); for(e in elems){ /*handle mouseleave here*/ } } i had name eh functions (and remove eh each call) because wasn't sure addeventlistener overrides same handler if called again.
edit
for non jquery way, need add onload="changelinkcursorhoverbinding()" on <body> tag way : <body onload="changelinkcursorhoverbinding()"> (the initial call after page's load).
Comments
Post a Comment