PDA

Click to See Complete Forum and Search --> : Change cursor on click

lutherjw
04-13-2006, 03:50 PM
Hey,

I'm fairly new to CSS. I know that it is possible to change the cursor on your site, but I was wondering if it was possible to change this to another image when the user clicks something on my site. If you could also provide me with the code it would be helpful.

Thanks in advance,

lutherjw :)
ray326
04-13-2006, 04:50 PM
This is more Javascript than CSS.
stephen1davis
04-13-2006, 05:01 PM
like this:
<html>
<head>
<style type="text/css">

body {
cursor:default;
}
</style>

<script type="text/javascript">
function change() {
document.body.style.cursor="help";
}
</script>
</head>

<body>

<div onclick="change()">
Click here!
</div>

</body>
balloonbuffoon
04-13-2006, 05:15 PM
Yeah, and if you need it to change to an image of your choosing:
document.body.style.cursor="url('first.cur'),help";

--Steve
skilled1
04-13-2006, 05:16 PM
isn't that just for a hover function?
balloonbuffoon
04-13-2006, 05:17 PM
It doesn't have to be.

--Steve
stephen1davis
04-13-2006, 05:18 PM
well, tested it the way it is "onclick", and it worked.
balloonbuffoon
04-13-2006, 05:22 PM
I think this is probably more what you're looking for:<html>
<head>
<style type="text/css">
body { cursor:default; } </style>
<script type="text/javascript">
function change() {
document.body.style.cursor=(document.body.style.cursor=="help") ? "default" : "help";
}
</script>
</head>
<body>
<div onmousedown="change()" onmouseup="change()"> Click here! </div>
Blah
Blah
Blah
</body>
</html>It goes back to the default cursor onmouseup.

--Steve
lutherjw
04-13-2006, 09:32 PM
Thanks for your help everyone.
lutherjw
04-14-2006, 03:11 PM
I can't figure out how to get this to work. Can you give me an example of the code with the tags filled in?

lutherjw
balloonbuffoon
04-14-2006, 07:55 PM
See up a couple posts, its a full page example, so there are sample tags.

--Steve
lutherjw
04-14-2006, 07:59 PM
Oh, okay thanks.
AltF4
04-14-2006, 08:34 PM
Do you have a list of all the cursers?
skilled1
04-14-2006, 08:57 PM
Do you have a list of all the cursers?

http://www.marcato.org/luke/web/cursors.html

cursor: auto;
cursor: crosshair;
cursor: default;
cursor: pointer;
cursor: move;
cursor: text;
cursor: wait;
cursor: help;
cursor: e-resize;
cursor: ne-resize;
cursor: n-resize;
cursor: nw-resize;
cursor: w-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: se-resize;
pookeyblow
11-26-2009, 11:23 AM
Can someone help me fill in the above code here? I tried, but couldn't get it to work! I want it to be like in googlemaps.
The cursor should display openhand.cur, but when you hold down the mouse button, I want it to display closedhand.cur.

Keep in mind:
For some reason custom cursors doesn't work in Firefox 3 (mac) so that's why I have written move; in my CSS.
And to avoid some problems in IE, I have put a cursor in a folder named cursor (cursor/openhand.cur).


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>**** ****** ******</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

#infobox {
position: fixed;
left: 30px;
bottom: 0px;
width: 60px;
height: 35px;
background-image: url(infobox.png);
background-repeat: no-repeat;
cursor: pointer;
}

#infobox:hover {
background-image: url(infobox2.png);
}

#infobox img, #topcontrol img {
width: 50px!important;
vertical-align: bottom;
}

#body {
cursor: url(http://www.*********.net/work/openhand.cur),url(cursor/openhand.cur),move;
}

#work img {
width: 100%;
}

</style>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.dragscroll.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js"></script>
<script type="text/javascript" src="jquery.imagepreload.js"></script>

<script type="text/javascript">
jQuery(function($){
if(/(Google)|(Apple)/.test(navigator.vendor)){
$(document.body).dragscroll();

}else{
$(document.documentElement).dragscroll();
}

});
</script>

</head>

<body id="body">

<div id="infobox"><a href="#"></a></div>


<div id="work">
<div id="work01" align="top"><img src="img/test_01.jpg" border="0"/></div>
<div id="work02" align="top"><img src="img/test_02.jpg" border="0"/></div>
<div id="work03" align="top"><img src="img/test_03.jpg" border="0"/></div>
</div>

</body>

</html>


I hope anyone can help me out here!

cheers,

pookey