Solved

Change mouse Cursor with custom image

Posted on 2011-02-22
11
2,413 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Ajax control editor 4 36
Javascript in a user control not working 17 54
Fixing my modal from bootstrap 18 16
Adjust the position 3 13
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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)

746 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

13 Experts available now in Live!

Get 1:1 Help Now