This is a very small tip for those who want to change their website or blog's mouse cursor. I came across many websites and blogs who have changed their cursors either to different styles or to images. So simply they use CSS property to change the mouse cursor. It is easier to change the cursor for the entire website or for a part of the website. So here in this tutorial I'm going to teach you about this.
As you know CSS is the most beautiful web language to style websites and any kind of webpage. And CSS3 new properties has changed the entire concept of web designing. Now you'll no more need of using jQuery and Flash for your websites, because CSS3 does the job for you.
The default mouse cursor is something like an arrow which many newbies want to change to something else. So here is the CSS code which you can use to change the pointer of the mouse, there are some values defined in CSS3 standard, however by using the URL property you can add an image, see below example.
<title> Changing Cursor</title>
The example above will be replacing the default arrow with an image which is stored online in a website 123cursors.com. So if you copy the above code and paste inside notepad and save it with .html extension then visiting the page on your browser, so the cursor will be replaced with an image.Here is the list of the all values which has been defined in CSS core programming. You can use one of the below listed values to change the pointer/cursor of your website:
All of the above values are the part of the CSS. You can use any of them to see the effect on your webpage.
Now here is the live example of changing the mouse pointer by using CSS, just hover your mouse over below green bordered area to see the effect:
The example above shows how the pointer is changed. We just used this CSS property in an HTML DIV:
<div style="cursor:url(http://www.123cursors.com/freecursors/6890.gif); border:4px solid green; padding:15px;"> Content Goes Here</div>You can also copy the above code to check it by yourself. However, if you want to change the cursor of your entire blog or website then you must add the CSS cursor property inside <body> tag.
You can download a numerous number of free mouse pointers by visiting below websites:
You can use any image for the pointer as you want, but the smaller sizes are pretty much better than larger images. So do implement today's trick and let me know if you have something to say.