brainhax
asked on
Change mouse Cursor with custom image
hi ,
i need to change mouse cursor with an image . like this site .with jquery and css
http://www.gluetube.com/
thanks in advance ..
i need to change mouse cursor with an image . like this site .with jquery and css
http://www.gluetube.com/
thanks in advance ..
You can use .cur and .ani file for your custom cursor like:
style{
cursor:url(cursorlocation. cur);
}
style{
cursor:url(cursorlocation.
}
Try something like this:
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26838482.html</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
$("#toggle").click( function() {
$(this).toggleClass( "custom-cursor" );
$("body").toggleClass( "custom-cursor" );
});
});
</script>
</head>
<style type="text/css">
.custom-cursor {
cursor:url("http://plugin.smileycentral.com/http%253A%252F%252Fplugin%252Esmileycentral%252Ecom%252Fassetserver%252Fcursor%252Ejhtml%253Fcur%253D1%2526i%253D8111a/image.gif") !important;
color: #FFFFFF !important;
}
</style>
<body>
<input id="toggle" type="button" value="Toggle">
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks every one ,
i have tried all the solutions , so far leakim971 solution is the best .
but the issue now is that , if i create a button or text box , i am unable to click on it , i am able to see it but can't click ,
i have used ,
pointer-events:none;
but it only works in ff , chrome , safari .
opera and IE suck so far .
any other solution with what i can click the items under the hand index finger ???
sol2.html
hand-01.png
i have tried all the solutions , so far leakim971 solution is the best .
but the issue now is that , if i create a button or text box , i am unable to click on it , i am able to see it but can't click ,
i have used ,
pointer-events:none;
but it only works in ff , chrome , safari .
opera and IE suck so far .
any other solution with what i can click the items under the hand index finger ???
sol2.html
hand-01.png
ASKER
any help guys ?
The problem is when you do a click, you click on the image, not the element behind the image.
So adding one pixel to the mouse position on both axes seems to allow we to click on the element behind.
(e.pageX+1)+"px","top":(e.pageY+1)
So adding one pixel to the mouse position on both axes seems to allow we to click on the element behind.
(e.pageX+1)+"px","top":(e.pageY+1)
$("#cursor").css({"left":(e.pageX+1)+"px","top":(e.pageY+1)+"px"});
ASKER
no it does not ,
have u seen that i add some pixel to bring the mouse pointer right under the index finger .
$("#cursor").css({"left":e .pageX-110 +"px","top ":e.pageY- 25+"px"});
thanks btw ,
any other solution .. ?
my objective is to use the hand index finger to be used as a mouse pointer ..
have u seen that i add some pixel to bring the mouse pointer right under the index finger .
$("#cursor").css({"left":e
thanks btw ,
any other solution .. ?
my objective is to use the hand index finger to be used as a mouse pointer ..
ASKER
its means there is no solution to the issue ..
btw , thanks every one
btw , thanks every one
You can use custom cursors but these don't work in most modern day browsers ...
http://stackoverflow.com/questions/336925/custom-cursor-image-css