Solved

Change mouse Cursor with custom image

Posted on 2011-02-22
11
2,450 Views
Last Modified: 2012-05-11
hi ,

i need to change mouse cursor with an image . like this site .with jquery and css


http://www.gluetube.com/

thanks in advance ..
0
Comment
Question by:brainhax
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
11 Comments
 
LVL 15

Expert Comment

by:Tomarse111
ID: 34950790
That link you provided is done in flash, that sort of support is not possible unless you go down that root.

You can use custom cursors but these don't work in most modern day browsers ...

http://stackoverflow.com/questions/336925/custom-cursor-image-css
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 34950842
You can use .cur and .ani file for your custom cursor like:
style{
cursor:url(cursorlocation.cur);
}
0
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
LVL 20

Expert Comment

by:Proculopsis
ID: 34950937

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>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 34950953
don't work on firefox but work on ie and chrome :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
	cursor: url(cursor.cur);
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).mousemove(function(e) {
			$("#cursor").css({"left":e.pageX+"px","top":e.pageY+"px"});
		});
	});
</script>
</head>
<body>
<img id="cursor" src="http://a34.idata.over-blog.com/3/39/16/67/dessin-anime-cartoon/souris-ratatouille-101009-disney.gif" style="position:absolute;left:0px;top:0px;" width="96" />
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 34951009
forget the cursor.cur, don't forget to change the extension of the attached file


cursor.txt
0
 

Author Comment

by:brainhax
ID: 34961657
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
0
 

Author Comment

by:brainhax
ID: 34967870
any help guys ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34969333
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)
$("#cursor").css({"left":(e.pageX+1)+"px","top":(e.pageY+1)+"px"});

Open in new window

0
 

Author Comment

by:brainhax
ID: 34986668
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 ..
0
 

Author Comment

by:brainhax
ID: 35046256
its means there is no solution to the issue ..
btw , thanks every one
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question