2 <html xmlns=
"http://www.w3.org/1999/xhtml">
4 <title>Cursor Change test
</title>
7 <script type='text/javascript'
8 src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
10 <script src=
"include/util.js"></script>
11 <script src=
"include/base64.js"></script>
12 <script src=
"include/canvas.js"></script>
15 <h1>Roll over the buttons to test cursors
</h1>
17 <input id=button1
type=
"button" value=
"Cursor from file (smiley face)">
18 <input id=button2
type=
"button" value=
"Data URI cursor (crosshair)">
24 <textarea id=
"debug" style=
"font-size: 9px;" cols=
80 rows=
25></textarea>
27 <canvas id=
"testcanvas" width=
"100px" height=
"20px">
37 cell.innerHTML += str +
"\n";
38 cell.scrollTop = cell.scrollHeight;
41 function makeCursor() {
42 var arr = [], x, y, w =
32, h =
32, hx =
16, hy =
16;
45 var ANDsz = w * h *
4;
46 var XORsz = Math.ceil( (w * h) /
8.0 );
50 arr.push16le(
0); // Reserved
51 arr.push16le(
2); // .CUR type
52 arr.push16le(
1); // Number of images,
1 for non-animated arr
56 arr.push(h); // height
57 arr.push(
0); // colors,
0 -
> true-color
58 arr.push(
0); // reserved
59 arr.push16le(hx); // hotspot x coordinate
60 arr.push16le(hy); // hotspot y coordinate
61 arr.push32le(IHDRsz + XORsz + ANDsz); // cursor data byte size
62 arr.push32le(
22); // offset of cursor data in the file
64 // Infoheader for Cursor #
1
65 arr.push32le(IHDRsz); // Infoheader size
66 arr.push32le(w); // Cursor width
67 arr.push32le(h*
2); // XOR+AND height
68 arr.push16le(
1); // number of planes
69 arr.push16le(
32); // bits per pixel
70 arr.push32le(
0); // type of compression
71 arr.push32le(XORsz + ANDsz); // Size of Image
78 for (y = h-
1; y
>=
0; y--) {
79 for (x =
0; x < w; x++) {
80 //if ((x === hx) || (y === (h-hy-
1))) {
81 if ((x === hx) || (y === hy)) {
82 arr.push(
0xe0); // blue
83 arr.push(
0x00); // green
84 arr.push(
0x00); // red
85 arr.push(
0xff); // alpha
87 arr.push(
0x05); // blue
88 arr.push(
0xe6); // green
89 arr.push(
0x00); // red
90 arr.push(
0x80); // alpha
95 // AND/bitmask data (seems to be ignored)
96 for (y =
0; y < h; y++) {
97 for (x =
0; x < Math.ceil(w /
8); x++) {
102 debug(
"cursor generated");
106 window.onload = function() {
108 var cross, cursor, cursor64;
110 Canvas.init(
"testcanvas");
111 debug(
"Canvas.init() indicates Data URI cursor support is: " + Canvas.isCursor());
113 $('button1').style.
cursor=
"url(face.png), default";
115 cursor = makeCursor();
116 cursor64 = Base64.encode(cursor);
117 //debug(
"cursor: " + cursor.slice(
0,
100) +
" (" + cursor.length +
")");
118 //debug(
"cursor64: " + cursor64.slice(
0,
100) +
" (" + cursor64.length +
")");
119 $('button2').style.
cursor=
"url(data:image/x-icon;base64," + cursor64 +
"), default";
121 debug(
"onload complete");