Changing Cursors

@jshalcottFeb 20.2006

Well I’m been working on my new website, and I thought changing the cursor to this one would be perfect. So I got cursors for normal, links, forms, and custom hourglasses. I’ve gotten everything to work but the hourglass one. How can I change this using CSS, if not css then what. ? But heres what I got right now dealing with all the cursors.

[code=html]body { all the other crap curor: url(normle.cur) } input { bunch of crap curosor: url(beam.cur) } p { bunch o crap cursor: url(beam.cur) } a:hover { bunch of crap cursor: url(link.cur) } [/code]

Now I just need to know how to change the hourglass cursor.

to post a comment

CSS

15 Comments(s) _↴

@Gaurav_KhannaFeb 21.2006 — #u can only use the default cursor which are define in css

try to use like this

{

cursor: move;

}

@ShrineDesignsFeb 21.2006 — #if i remember correctly you can specify a URI for the cursor property, i don't think any browser supports it though

@Gaurav_KhannaFeb 21.2006 — #Try to use this code sample below and move u r mouse on the table td, it will change the mouse cursor.

<html>

<head>

</head>

<body>

<table border="1" width="100%">

<tr>

<td style="cursor:move "> 

</td>

</tr>

</table>

</body>

</html>

@jshalcottauthorFeb 22.2006 — #thank you for all the help ? , but what i was looking for is when you click on a link instead of the hourglass a custom hourglass.

@phpnoviceApr 30.2006 — #a:active { url(custom.cur) }

@FangApr 30.2006 — #http://developer.mozilla.org/en/docs/Using_URL_values_for_the_cursor_property

@phpnoviceApr 30.2006 — #I presume you're referring to the "[B]must[/B] be followed" part of the spec. I was just giving a quick (crude) example. So sorry if I offended your sensibilities on the issue. Truly, I am.

@AgahnimMay 03.2006 — #hollaz..i post here cause i don't want to make a new topic...

well [url=l2hacks.freehostia.com]this[/url] is my site.i want to add the cursor from [url=www.la2.gr]this[/url] page but i dont know how..

the cursor link is this: http://www.la2.gr/img/maus1.cur

i try this

[CODE]<html>
 <head>
 </head>
 
 <body>
 <table border="1" width="100%">
 <tr>
 <td style="cursor:http://www.la2.gr/img/maus1.cur ">&nbsp;
 
 </td>
 </tr>
 </table>
 </body>
 </html>
 Reply With Quote[/CODE]

but anything happens...

also in this site with the cursor i want, i find this command in a .css file(the file have many commands but i think this is what why need)

[B]A:link {

CURSOR: url('img/maus1.cur'); COLOR: #dbdbdb; TEXT-DECORATION: none

}[/B]

thanx in advance and sorry for bad english

@FangMay 03.2006 — #<td style="cursor:url(<a href="http://www.la2.gr/img/maus1.cur)">http://www.la2.gr/img/maus1.cur)</a>, auto;">

@AgahnimMay 04.2006 — #well thanx a lot!i did it.but i want this cursor not only in a table...

like www.la2.gr

sorry for bad english....you understand what i want?

@phpnoviceMay 04.2006 — #You've already been shown how to do it in one way. Why don't you just look at the source of that page and, like, figure the rest out for yourself?

Cheers.

@AgahnimMay 04.2006 — #well in this site(la2.gr) the source is in .css file..but in this topic, Gaurav Khanna post a way to do it only with html...no css..

i dont know if css and html is different..i am newbie in HTML world :p

i want something like this:

<style="cursor:http://www.la2.gr/img/maus1.cur">Site</style> but this is not work...

@phpnoviceMay 04.2006 — #That's exactly what I mean... Take the CSS from that site and you're all set. But, otherwise, what was posted here in this thread *[B][I]is[/I][/B]* [U]still[/U] CSS. It is just called "inline" CSS. Thus, this:

<td style="cursor:url(http://www.la2.gr/img/maus1.cur), auto;">

and this:

td { cursor:url(http://www.la2.gr/img/maus1.cur), auto; }

are exactly the same thing. You just put the second one between STYLE [U]tags[/U] -- instead of as an inline HTML [U]style attribute[/U] value. Also, the first one applies to a single element, while the second one applies to all such elements in a document.

@AgahnimMay 04.2006 — #well i try this:

<style>td { cursor:url(http://www.la2.gr/img/maus1.cur), auto; }</style>

but nothing?

that's my page...

&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;L2Hacks&lt;/title&gt;
 &lt;body&gt;
 &lt;BODY BACKGROUND="http://l2hacks.freehostia.com/uploads/backround.gif" TEXT="FFFFFF"&gt;
 &lt;center&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo1.gif"&gt;&lt;br&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo2.gif"&gt;&lt;A HREF="http://l2hacks.freehostia.com/index.htm" onMouseOver="SwapOut1()" onMouseOut="SwapBack1()"&gt;&lt;IMG NAME="news" SRC="http://l2hacks.freehostia.com/uploads/logo/logo3OFF.gif" WIDTH=64 HEIGHT=34 BORDER=0&gt;&lt;/A&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo4.gif"&gt;&lt;A HREF="http://l2hacks.freehostia.com/downloads.htm" onMouseOver="SwapOut2()" onMouseOut="SwapBack2()"&gt;&lt;IMG NAME="downloads" SRC="http://l2hacks.freehostia.com/uploads/logo/logo5OFF.gif" WIDTH=90 HEIGHT=34 BORDER=0&gt;&lt;/A&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo6.gif"&gt;&lt;A HREF="http://l2hacks.freehostia.com/helpus.htm" onMouseOver="SwapOut3()" onMouseOut="SwapBack3()"&gt;&lt;IMG NAME="helpus" SRC="http://l2hacks.freehostia.com/uploads/logo/logo7OFF.gif" WIDTH=73 HEIGHT=34 BORDER=0&gt;&lt;/A&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo8.gif"&gt;&lt;br&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo9.gif"&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo10.gif"&gt;&lt;A HREF="http://l2hacks.freehostia.com/forum" onMouseOver="SwapOut4()" onMouseOut="SwapBack4()"&gt;&lt;IMG NAME="forum" SRC="http://l2hacks.freehostia.com/uploads/logo/logo11OFF.gif" WIDTH=68 HEIGHT=34 BORDER=0&gt;&lt;/A&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo12.gif"&gt;&lt;A HREF="http://l2hacks.freehostia.com/links.htm" onMouseOver="SwapOut5()" onMouseOut="SwapBack5()"&gt;&lt;IMG NAME="links" SRC="http://l2hacks.freehostia.com/uploads/logo/logo13OFF.gif" WIDTH=61 HEIGHT=34 BORDER=0&gt;&lt;/A&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo14.gif"&gt;&lt;A HREF="javascript:self.close()" onMouseOver="SwapOut6()" onMouseOut="SwapBack6()"&gt;&lt;IMG NAME="exit" SRC="http://l2hacks.freehostia.com/uploads/logo/logo15OFF.gif" WIDTH=56 HEIGHT=34 BORDER=0&gt;&lt;/A&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo16.gif"&gt;&lt;br&gt;&lt;img src="http://l2hacks.freehostia.com/uploads/logo/logo17.gif"&gt;&lt;/center&gt;
 &lt;SCRIPT LANGUAGE="JavaScript"&gt;
 &lt;!-- hide from none JavaScript Browsers
 
 Image1= new Image(75,50)
 Image1.src = "http://l2hacks.freehostia.com/uploads/logo/logo3OFF.gif"
 Image2 = new Image(75,50)
 Image2.src = "http://l2hacks.freehostia.com/uploads/logo/logo3ON.gif"
 
 Image3= new Image(75,50)
 Image3.src = "http://l2hacks.freehostia.com/uploads/logo/logo5OFF.gif"
 Image4 = new Image(75,50)
 Image4.src = "http://l2hacks.freehostia.com/uploads/logo/logo5ON.gif"
 
 Image5= new Image(75,50)
 Image5.src = "http://l2hacks.freehostia.com/uploads/logo/logo7OFF.gif"
 Image6 = new Image(75,50)
 Image6.src = "http://l2hacks.freehostia.com/uploads/logo/logo7ON.gif"
 
 Image7= new Image(75,50)
 Image7.src = "http://l2hacks.freehostia.com/uploads/logo/logo11OFF.gif"
 Image8 = new Image(75,50)
 Image8.src = "http://l2hacks.freehostia.com/uploads/logo/logo11ON.gif"
 
 Image9= new Image(75,50)
 Image9.src = "http://l2hacks.freehostia.com/uploads/logo/logo13OFF.gif"
 Image10 = new Image(75,50)
 Image10.src = "http://l2hacks.freehostia.com/uploads/logo/logo13ON.gif"
 
 Image11= new Image(75,50)
 Image11.src = "http://l2hacks.freehostia.com/uploads/logo/logo15OFF.gif"
 Image12 = new Image(75,50)
 Image12.src = "http://l2hacks.freehostia.com/uploads/logo/logo15ON.gif"
 
 function SwapOut1() {
 document.news.src = Image2.src; return true;
 }
 
 function SwapBack1() {
 document.news.src = Image1.src; return true;
 }
 
 function SwapOut2() {
 document.downloads.src = Image4.src; return true;
 }
 
 function SwapBack2() {
 document.downloads.src = Image3.src; return true;
 }
 
 function SwapOut3() {
 document.helpus.src = Image6.src; return true;
 }
 
 function SwapBack3() {
 document.helpus.src = Image5.src; return true;
 }
 
 function SwapOut4() {
 document.forum.src = Image8.src; return true;
 }
 
 function SwapBack4() {
 document.forum.src = Image7.src; return true;
 }
 
 function SwapOut5() {
 document.links.src = Image10.src; return true;
 }
 
 function SwapBack5() {
 document.links.src = Image9.src; return true;
 }
 
 function SwapOut6() {
 document.exit.src = Image12.src; return true;
 }
 
 function SwapBack6() {
 document.exit.src = Image11.src; return true;
 }
 
 // - stop hiding --&gt;
 &lt;/SCRIPT&gt;
 &lt;/head&gt;
 [b]&lt;STYLE&gt;
 
 link {cursor: url(http://www.la2.gr/img/maus1.cur), auto;}
 
 &lt;/STYLE&gt;[/b]
 &lt;br&gt;&lt;br&gt;&lt;br&gt;
 &lt;b&gt;&lt;center&gt;
 &lt;br&gt;Agahnim's Bot Collection Version 4 - &lt;A HREF=http://l2hacks.freehostia.com/uploads/abc/abc4.rar STYLE="text-decoration: none"&gt;&lt;FONT COLOR="FF0000"&gt;Download&lt;/FONT&gt;&lt;/A&gt; (&lt;A HREF=http://rapidshare.de/files/18610144/ABC4.rar.html TARGET="resource window" STYLE="text-decoration: none"&gt;&lt;FONT COLOR="FF0000"&gt;Mirror&lt;/FONT&gt;&lt;/A&gt;)
 &lt;/center&gt;&lt;/b&gt;
 &lt;/body&gt;
 &lt;/html&gt;

plz edit it for me...

@phpnoviceMay 04.2006 — #well i try this:

<style>td { cursor:url(http://www.la2.gr/img/maus1.cur), auto; }</style>

but nothing?[/QUOTE]
You don't have a TABLE in your page, so that particular style specification won't do you any good. I see you have some STYLE tags in your document, but that they aren't in the HEAD section of your document. Why don't you start with moving those into the HEAD.

Also in #CSS _↴

Adding drop shadow to main content area...Should you use <br />?help with rounded tables

Success!

Help @jshalcott spread the word by sharing this article on Twitter...

Tweet This

Changing Cursors

15 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #CSS _↴