MouseCursorCSSID

Changing the Mouse Cursor With CSSID
Run BASIC can use CSS commands to change the mouse cursor within sections of code. Many cursor shapes are recognized by the browser. These include the familiar, , , and cursors. This code displays the (hourglass) cursor while the mouse is hovering over the green box. code format="vbnet" cssID #mousewait, "{	Background-Color: #009900;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Wait;	Padding: 30px 0px 30px 0px;	}"

Div mousewait Print "Waiting" End Div End code

Custom cursors can be loaded from online files using the CSSID command code format="vbnet" Cursor: Url('http://pathname/cursorname.cur') code

Run the following code to see many cursor styles as well as an animated cursor loaded from this Run BASIC Wikispaces site. code format="vbnet" cssID #titleframe, "{	Background-Color: #FFFFCC;	Width: 400px;	Padding: 30px 0px 30px 0px;	Text-Align: Center;	Font-Size: 150%;	Font-Variant: Small-Caps;	Font-Weight: Bold;	}"

cssID #mouse01, "{	Background-Color: #33FFCC;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Pointer;	Padding: 30px 0px 30px 0px;	Float: Left;	}" cssID #mouse02, "{	Background-Color: #6633CC;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Crosshair;	Padding: 30px 0px 30px 0px;	Float: Left;	}" cssID #mouse03, "{	Background-Color: #9966FF;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Text;	Padding: 30px 0px 30px 0px;	Float: Left;	}" cssID #mouse04, "{	Background-Color: #CC99FF;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Move;	Padding: 30px 0px 30px 0px;	}"

cssID #mouse05, "{	Background-Color: #FFCC33;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Wait;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse06, "{	Background-Color: #33FF33;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Help;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse07, "{	Background-Color: #66CC66;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Progress;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse08, "{	Background-Color: #999966;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Not-Allowed;	Padding: 30px 0px 30px 0px;	}"

cssID #mouse09, "{	Background-Color: #CC66CC;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: No-Drop;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse10, "{	Background-Color: #FF3399;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Vertical-Text;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse11, "{	Background-Color: #336699;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: All-Scroll;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse12, "{	Background-Color: #6699CC;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Col-Resize;	Padding: 30px 0px 30px 0px;	}"

cssID #mouse13, "{	Background-Color: #0099CC;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: Row-Resize;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse14, "{	Background-Color: #669900;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: E-Resize;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse15, "{	Background-Color: #9900CC;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: NE-Resize;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse16, "{	Background-Color: #3300CC;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: N-Resize;	Padding: 30px 0px 30px 0px;	}"

cssID #mouse17, "{	Background-Color: #FFFF33;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: NW-Resize;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse18, "{	Background-Color: #CCCC33;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: W-Resize;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse19, "{	Background-Color: #990000;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: SW-Resize;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse20, "{	Background-Color: #FFFF99;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: S-Resize;	Padding: 30px 0px 30px 0px;	}"

cssID #mouse21, "{	Background-Color: #00FFCC;	Width: 100px;	Height: 30px;	Text-Align: Center;	Cursor: SE-Resize;	Padding: 30px 0px 30px 0px;	Float: Left;	}"

cssID #mouse22, "{	Background-Color: #9999FF;	Width: 100px;	Height: 60px;	Text-Align: Center;	Cursor: Url('http://runbasic.wikispaces.com/space/showimage/ttv3p.ani');	Padding: 15px 0px 15px 0px;	Float: Left;	}"

cssID #mouse23, "{	Background-Color: #0033FF;	Width: 100px;	Height: 30px;	Text-Align: Center;	Padding: 30px 0px 30px 0px;	}"

Div titleframe Print "Changing the Mouse Cursor With CSSID" End Div Div mouse01 Print "Pointer" End Div Div mouse02 Print "Crosshair" End Div Div mouse03 Print "Text" End Div Div mouse04 Print "Move" End Div Div mouse05 Print "Wait" End Div Div mouse06 Print "Help" End Div Div mouse07 Print "Progress" End Div Div mouse08 Print "Not-Allowed" End Div Div mouse09 Print "No-Drop" End Div Div mouse10 Print "Vertical-Text" End Div Div mouse11 Print "All-Scroll" End Div Div mouse12 Print "Col-Resize" End Div Div mouse13 Print "Row-Resize" End Div Div mouse14 Print "E-Resize" End Div Div mouse15 Print "NE-Resize" End Div Div mouse16 Print "N-Resize" End Div Div mouse17 Print "NW-Resize" End Div Div mouse18 Print "W-Resize" End Div Div mouse19 Print "SW-Resize" End Div Div mouse20 Print "S-Resize" End Div Div mouse21 Print "SE-Resize" End Div Div mouse22 Print "Custom Cursor Loaded From File" End Div Div mouse23 Print "Normal Cursor" End Div End code