Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Change mouse Cursor with custom image

Posted on 2011-02-22
11
Medium Priority
?
2,474 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
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…
Suggested Courses

972 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