Skip to content

Instantly share code, notes, and snippets.

@milkbread

milkbread/index.html

Created August 9, 2013 12:06
Show Gist options
  • Save milkbread/6193118 to your computer and use it in GitHub Desktop.
Save milkbread/6193118 to your computer and use it in GitHub Desktop.
Download ZIP
HTML: Mousecursor, define them
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<title>Example for individual mouse pointer</title>
<style>
body {
margin: 1em auto 4em auto;
width: 960px;
}
div{
padding: 10px;
margin-top: 15px;
background: rgba(100,100,100,0.4);
border-radius: 15px;
}
</style>
</head>
<body>
<h1> Individual mousepointer </h1><br>
<div id="hand"> Hover me ... and the cursor will be a hand! </div>
<div id="cross"> Hover me ... and the cursor will be a cross! </div>
<br>
<a id='help' href='http://www.javascripter.net/faq/stylesc.htm'> Cool guys/girls share there knowledge ... so you can just learn more from the original source!</a>
<div id="all"> These are all possible commands ... hover me ... and the cursor will be a spinning wheel <br>
auto <br> move <br> no-drop <br> col-resize<br>
all-scroll <br> pointer <br> not-allowed <br> row-resize<br>
crosshair <br> progress <br> e-resize <br> ne-resize<br>
default <br> text <br> n-resize <br> nw-resize<br>
help <br> vertical-text <br> s-resize <br> se-resize<br>
inherit <br> wait <br> w-resize <br> sw-resize<br>
</div>
<script type="text/javascript">
//Example1: HAND
var elem=document.getElementById('hand')
if (elem.style) elem.style.cursor='pointer';
//Example2: CROSS
var elem2=document.getElementById('cross')
if (elem2.style) elem2.style.cursor='crosshair';
//Example3: ALL
var elem3=document.getElementById('all')
if (elem3.style) elem3.style.cursor='progress';
//Example4: NOT-ALLOWED
var elem4=document.getElementById('help')
if (elem4.style) elem4.style.cursor='help';
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment