Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Change mouse Cursor with custom image

Posted on 2011-02-22
11
Medium Priority
?
2,467 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

705 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