Jump to content


Photo
- - - - -

CSS - Custom Cursors With CSS


  • Please log in to reply
2 replies to this topic

#1 Dh.

Dh.

    CSS Guru

  • Members
  • PipPipPip
  • 807 posts
  • Gender:Male
  • Location:Berkshire, England

Posted 18 September 2006 - 07:49 AM

Custom Cursors With CSS
Written by Dale Humphries

Have you ever been browsing the web and seen how some sites have different cursors for links? Well in this short tutorial I intend to show you how to do this. Please note, to do this tutorial, you should have basic knowledge of CSS.

1. The first thing to do is to open your CSS file and input the following:
a {
cursor: crosshair;
}

This will select a premade cursor to use on hyperlinks. You can also use your own image, with this code:
a {
cursor: url(imagename.cur);
}

2. Below is the full list of premade cursors you can use. But be warned using them too much or in the wrong place can be very annoying for visitors to your site:
cursor: auto;
cursor: crosshair;
cursor: default;
cursor: pointer;
cursor: wait;
cursor: text;
cursor: help;
cursor: move;
cursor: n-resize;
cursor: ne-resize;
cursor: e-resize;
cursor: se-resize;
cursor: s-resize;
cursor: sw-resize;
cursor: w-resize;
cursor: nw-resize;

Thank you for using this tutorial

Edited by Dh89, 18 September 2006 - 07:58 AM.


#2 Scythar

Scythar

    Honored X Staff

  • Members
  • PipPipPipPip
  • 1,888 posts
  • Gender:Male
  • Location:Antwerp (Belgium)

Posted 19 September 2006 - 08:21 AM

I dont know 1 line of code, but since this seams so easy and i DO have made some cursors in michelagelo i will try this out this evening :P
THX!

Keep them comming those tuts, cos i i making website for my father in law :) !

#3 Scythar

Scythar

    Honored X Staff

  • Members
  • PipPipPipPip
  • 1,888 posts
  • Gender:Male
  • Location:Antwerp (Belgium)

Posted 24 September 2006 - 10:49 AM

k,
didnt work,

damn, even the easiest tuts i cant do.
Whenever coding is involved, i just die :P
HELP !

Using Dreamweaver
Started new CSS called style1
there i could easily change cursor to crosshair
then i went on the page and searched in the html code where it said style1 and wanted to chenge the cursor (crosshair) to a custom made one, using your url(cursor.cur) code, but i dont know what i have to put exacly for url, so i took the absolute address to the cursor, i did something like this: --> www.name.be/2D design/cursors (namecursor.cur), but that didnt work :( .




Also, a long time ago i could make a "secure" page in adobe golive: it was explained in the manual.
But now i am using dreamweaver and and i dont know how to do this, could you help?
dont have any database connected, i jus want when they click on link, they have to type a PW to enter the page.
(so no login and PW with database and access levels r anything)

Edited by Scythar, 24 September 2006 - 12:57 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users