Saturday, July 18, 2015

Change Cursor on Web pages

Another tutorial here...

For those wondering if you can customize cursors in your website or blogs, you can absolutely do that!

I have configured my page to use these customize cursors:
 My regular navigating cursor to match my bunny icons. :a51:


Ex 1: From site's tutorial: (Put inside <HEAD>....</HEAD> tag)
<style type="text/css">
body{cursor:url(http://media.tumblr.com/tumblr_ma87zmgW9u1qid2nw.gif), url(http://media.tumblr.com/tumblr_ma87zmgW9u1qid2nw.gif), auto;}
</style>
Ex 2: My blog codes: (so it covers hover on links - I put it inside <BODY>...</BODY> tag)
<style type='text/css'>
body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_ma87zmgW9u1qid2nw.gif), progress;}
</style> 
 Cursor for navigating on images.

My blog codes: (I put it inside <BODY>...</BODY>  tag). 
I've read from forums and sites that this can be added in body tag only. Not really sure but I added mine in BODY tag.
<style type='text/css'>
img {cursor: url(http://cur.cursors-4u.net/anime/ani-11/ani1073.cur), progress;}
</style>  
 Cursor for navigating on page links.

My blog codes: (I put it inside <HEAD>....</HEAD> tag)
#nav li a:hover 
{ cursor: url(http://cur.cursors-4u.net/anime/ani-11/ani1070.cur), progress; } 
Your options:
A. You can put it inside head tag.
B. You can put it inside body tag.
C. You can put it in CSS stylesheet.

Credits:
Bunny cursor: http://kawaiilayouts001.tumblr.com/
Usagi cursors: http://www.cursors-4u.com/