Sites with an attractive appearance are very popular with visitors. To improve the appearance of the resource, their owners usually completely or partially change the design. Unfortunately, adding new colorful elements for page decoration takes a lot of time. A quick way to grab the attention of resource visitors is to replace the usual cursor with a small image. To install such an element on the site, you need to perform a few simple steps.
It is necessary
- - own site
- - have at least basic knowledge of HTML
- - know where the CSS code is on the site
Instructions
Step 1
First, download a picture that will replace the pointer on the site. Images of common graphic formats (.bmp,.gif,.jpg,.png, etc.) are not suitable for this purpose.
Step 2
To replace the pointer, you need a picture in the.cur or.ani format. To get such an image, search the Internet for pictures specially designed for cursors. The.cur extension is specific to static images, and the.ani extension is specific to animated images. Save the file you like to your computer.
Step 3
But in order to change the pointer, it is not at all necessary to take the finished image. If you want to make a picture yourself, then use one of the special programs for creating cursors or converting graphic file formats.
Step 4
Fill in the image for the cursor on the site. Then, in the resource code, find the tag and make the following changes to it:
Instead of the "images / 1.ani" entry, indicate the path to the image uploaded to your site.
Step 5
If you want the cursor to be in the form of one image when hovering over the link, and when it is in the absence of the linking element - to look like another image, then it is better to use CSS to change the pointer. To make such transformations, first upload another file with the.cur or.ani extension to the site.
Step 6
Then, in the CSS of your site, make an entry "body {cursor: url ('1.ani');}", instead of "1.ani", specify the path to the main image for the cursor uploaded to the site. This code adds the property to change the cursor to the specified picture to the tag in which the content of all pages of the resource is written.
Step 7
Then write in CSS the line "a {cursor: url ('2.ani');}", replacing "2.ani" with the path to the cursor image uploaded to the resource, which should appear when the pointer is hovered over the link. The entry made allows you to replace the cursor with the corresponding picture when the pointer hits any link on the site, as it makes changes to the tag property.
