How to change the cursor on the website

How to change the cursor on the website

The websites having attractive appearance enjoy wide popularity at visitors. To improve shape of a resource, their owners usually in whole or in part change design. But adding of new colourful elements for execution of pages, unfortunately, takes a lot of time. A fast way to capture attention of visitors of a resource is replacement of the usual cursor by the small image. For installation of such element on the website it is necessary to perform several simple operations.

It is required to you

  • - own website
  • - have at least initial knowledge of HTML
  • - the nobility where there is a CSS code on the website

Instruction

1. At first download the picture which will replace the pointer on the website. Images of widespread graphic formats (.bmp, .gif, .jpeg, .png, etc.) will not be suitable for this purpose.

2. For replacement of the pointer the picture in the .cur or .ani format is necessary. To receive such image, find the pictures which are specially intended for cursors in the Internet. The .cur extension is characteristic of static the image, and .ani - for animated. Save the pleasant file on the computer.

3. But, to change the pointer, it is not obligatory to take the ready image at all. If you want to make the picture independently, then use one of special programs for creation of cursors or converting of formats of graphic files.

4. Fill in the image for the cursor on the website. Then find the <body> tag in the code of a resource and make the following changes to it:
<body style="" cursor: url(/images/1.ani);""> <body>
Instead of the record ""images/1.ani"" designate path to the picture which is filled in on your website.

5. If you want the cursor when aiming at the link to be in the form of one picture, and at stay in the field of lack of the referring element - had an appearance of other image, then it is better to use CSS for change of the pointer. To make such conversions, at first upload on the website one more file with the .cur or .ani extension.

6. Then in CSS of your website make record ""by body {cursor: url ('1.ani'); }"", having specified instead of ""1.ani"" path to the main image which is filled in on the website for the cursor. This code adds property to change the cursor for the specified picture to the <body> tag in which contents of all pages of a resource register.

7. Then write to CSS a line ""to a {cursor: url ('2.ani'); }"", having replaced ""2.ani"" with path to the image of the cursor which is filled in on a resource which should arise when aiming the pointer at the link. The made record allows to replace the cursor with the corresponding picture at hit of the pointer on any link on the website as makes changes to property of the <tag.

Author: «MirrorInfo» Dream Team


Print