|
|
 |
|
|
Pages: 1
Mouse cursor change
(Click here to view the original thread with full colors/images)
Posted by: Cliff
Does anyone know if it is possible to change the mouse cursor for a webpage? (trying to be more specific) What I want is to make a page where the cursor is changed (to a custom cursor) for the entire thing, not just for transition between pages or for a rollover of text or a picture. Also, I would like to know if it is possible to make it larger, maybe about five or ten times the size of a normal cursor.
Any help would be greatly appreciated.
Posted by: BekZoR
Yes, and yes.  You can accomplish both tasks using Javascript. There are a few ways to go about it...
These are the possible values for the cursor:
auto ------ Shows it according to how the viewer has it set (plain)
crosshair ------Looks like a cross
default ------ Makes the cursor stay the same
move ------ Looks like you should be moving something
hand ------The hand you usually see over links
help ------A question mark beside the arrow
text ------ The bar you see when the mouse is over text
wait ------ The "waiting" hourglass!
n-resize ------ An arrow- North
s-resize ------ An arrow- South
e-resize ------ An arrow- East
w-resize ------An arrow- West
ne-resize ------ An arrow- NorthEast
nw-resize ------An arrow- NorthWest
se-resize ------ An arrow- SouthEast
sw-resize ------An arrow- SouthWest
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Easy Way: Using HTML, place a style attribute in the <BODY> tag. This will affect everything inbetween the <BODY> and </BODY> tags.
<HTML>
<HEAD>
<TITLE>
Testing
</TITLE>
</HEAD>
<BODY style="cursor:crosshair">
....
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Semi-Easy Way: Using HTML, place some style attributes in a <STYLE> tag. The style tag should go in between the <HEAD> and </HEAD> tag of your page.
Declared in the header:
<HTML>
<HEAD>
<STYLE>
body {
cursor: crosshair;
}
</STYLE>
</HEAD>
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Difficult Way: Use cascading style sheets (I love them), and put this class declaration in your file.
Put this in a .css file. Name it whatever you want, but make sure it's the same as below.
usethis {
cursor: crosshair;
font-size: 20px;
}
Then, in your actual page, put this:
<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="nameofstylesheet.css">
</HEAD>
<BODY CLASS="usethis">
...
For the font issue, all you have to do is use the <FONT> tag. To make font bigger, use:
<FONT SIZE=+4>This is the text that I want bigger.</FONT> If you want all your text bigger, put the tags around all of your text.
Experiment with the sizes to see what you like. You can use + and - numbers, or you can specify a pixel size usine 16px instead of +4.
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
For more help/information on how to use Javascript and the <STYLE> tag, check out this website:
http://www.w3schools.com/html/html_styles.asp
For more help/information on how to use cascading style sheets, check out these websites:
http://www.pageresource.com/dhtml/indexcss.htm
http://www.howtocreate.co.uk/tutori...hp?tut=1&part=1
Cheers!
Posted by: Cliff
OK and thanks for all the help. If I want to use a custom mouse cursor can I just upload the picture and use
style="cursor:path"
or do I have to do it some other way?
Also, my question about resizing was about making the actual cursor itself bigger. Would that be done in a way similar to resizing text, or is it possible at all?
Posted by: BekZoR
Opps - musta read that last part wrong.
I'll have to test the custom cursor - but I'll let you know tomorrow. I'll do it at work. 
Look for another post soon.
Cheers!
Posted by: dazlia
Hi guys,
Just came across this thread whilst searching for a similar problem really !
I'm creating a HTML page, which is not to be used online, but on a local presentation in a Touch-Screen environment.
All I want to do is to hide the cursor on the entire HTML page. Ideally I would like to hide it alltogether, but I do have a transparent Cursor file called "hidden.ani" whcih sits in the same root directory as my Index page.
Could someone please give me the entire code to put into the page if possable?
I have the follwing code but cannot substutute the crosshair for my hidden.ani file.
<body bgcolor="#FFFFFF" style="cursor:crosshair" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Any ideas please folks?
many thanks
daz
Posted by: Cliff
I would use
<style>
body {
cursor:url("hidden.ani");
}
</style>
Check out mine:
Warning: If you find 'the finger' offensive, don't check it out
You don't like our site?
I actually made this and linked to it from my site. I wanted to make it a lot bigger, but I'm not sure if that's possible.
|
|
|
|
|
