Cursor Images

The cursor property can be used to change and control the appearance of the mouse cursor.
Syntax:

selector { cursor: value; }
- value - specifies the type of cursor to be displayed when pointing on an elemen.
In this table there are diferent types of values that you can use for cursor property (bellow you can see some code examples):

CSS Cursors

Example, three DIVs with diferent cursor type for each one.
<style type="text/css"><!--
#ex1 div {
 float: left;
 width: 30%;
 height: 35px;
 margin: 2px;
 border: 2px solid blue;
 text-align: center;
}
#idiv1 { cursor: pointer; }
#idiv2 { cursor: wait; }
#idiv3 { cursor: move; }
--></style>

<div id="ex1">
 <div id="idiv1">Value - pointer</div>
 <div id="idiv2">Value - wait</div>
 <div id="idiv3">Value - move</div>
 <br style="clear:left;" />
</div>

- Demo (move the mouse over each cell).
Value - pointer
Value - wait
Value - move

Cursor Images

If you want a custom cursor, you can use an image for the mouse cursor appearance. The standard image type that can be used for cursor is the ".cur" format.
To create a .cur file, you need specialized imagery software. A freely available cursor editor is the JustCursors, you can use this software to edit /create static or animated cursors. To download it, click: Download JustCursors.
Once you have the ".cur" file, use this syntax in your style sheet:
selector { cursor: url('image.cur'), default; }
Example:
<style type="text/css"><!--
#ex2 {
 height: 89px;
 border: 2px solid blue;
 cursor: url('bluearrow.cur'), default;
}
--></style>

<div id="ex2">Cursor Image, ".cur"</div>

Demo (place your mouse over the text bellow):
Cursor Image, ".cur"

• Internet Explorer can also use ".ani" files for cursor images.
• Modern browsers, like Mozilla Firefox, Google Chrome, can use PNG images for cursor.
You can find on the net various web sites with free ".ani" images, search for: "free download ani cursor images".
Once you have an image in ".ani" format, you can conver it in ".png", then use both files in "cursor" property to make your CSS style work cross-browsers. Just look on the net for: "free convert ani png online".
To add two image files (ANI and PNG) in "cursor" property, use this syntax:
selector { cursor: url('image.ani'), url('image.png'), default; }

Example, a cursor rose:
<style type="text/css"><!--
#ex3 {
 height: 89px;
 border: 2px solid blue;
 cursor: url('rosecursor.ani'), url('rosecursor.png'), default;
}
--></style>

<div id="ex3">Cursor Images, ".ani" (for IE), and ".png" (for modern browsers).</div>

Demo (place your mouse over the text bellow):
Cursor Images, ".ani" (for IE), and ".png" (for modern browsers).

• Click: Cursor Images to download an archive with some ".cur" and ".ani" files that you can use to test the examples presented in this tutorial.

Path to the image file

If you add the CSS code into an external ".css" file, take into account the fact that Internet Explorer interprets relative URLs as relative to the HTML document, but modern browsers (Mozilla Firefox, Google Chrome) interpret relative URLs as relative to the ".css". So, in the code in ".css" add two "url" paths for ".cur" file, one relative to the ".css" file, and other "url" relative to the HTML document in which the ".css" file is included.
For example, if the ".cur" and ".css" files are in the same folder, named "styles", and the HTML document is in a directory above this CSS file, we'll use this code in the ".css" file:
/*
  The CUR and CSS files are in the same folder, the HTML is in a directory above this CSS file
*/

#id {
  cursor: url('bluearrow.cur'),             /* Modern browsers    */
          url('styles/bluearrow.cur'),      /* Internet Explorer  */
          default;
}
In this way, the style will work in all major browsers.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
CSS cursor property - Custom Cursors

Last accessed pages

  1. Using slideDown and SlideUp (1458)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (4308)
  3. Get and change IFrame content through a JavaScript script created in another IFrame (8280)
  4. Nan Bubble (319)
  5. PHP-MySQL Scripts (3539)

Popular pages this month

  1. Qwop (4208)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2502)
  3. Get the value of the selected /checked checkboxes in a form (1942)
  4. Drag Racer V3 (1609)
  5. Flash Games - Free online Games (1315)