Solved

Change mouse Cursor with custom image

Posted on 2011-02-22
11
2,433 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 27

Expert Comment

by:Lukasz Chmielewski
ID: 34950796
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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How do specify keydowns in JavaScript 3 43
Change div area and length 1 26
Add box and text color changing for everything 1 23
Select case on click 3 13
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

813 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now