ImageButton

ImageButton
//The ImageButton requires Run BASIC Beta2 or later//

An **ImageButton** is a Link in boxed form displaying an image. It has the following syntax:

IMAGEBUTTON #handle, imagePath$, handler - Add an image button to the page using handle, imagePath$, and handler

The imagePath$ is the path to the image. This image should be stored in the Run BASIC public folder. When the user clicks on the imagebutton, the event handler specified is activated. It can be either a sub or a branch label. If the handler is a sub, the handle of the imagebutton is passed into the sub. If the handler is a branch label, the global variable EventKey$ is set to be the handle of the imagebutton.

Here is a short demo.

code format="vbnet" 'create an imagebutton with sub event handler imagebutton #doStuff, "\runbutton.png", doStuff print:print

'create an imagebutton with branch label event handler imagebutton #doMore, "\openbutton.png", [doMore]

wait

sub doStuff handle$ print:print "Handle is ";handle$ end sub

[doMore] print:print "Handle is ";EventKey$ wait code

IMAGEBUTTON methods
ImageButtons have the following methods:


 * 1) handle CSSCLASS - Set the CSS class tag
 * 2) handle SETKEY(stringExpr$) - Set the imagebutton's event key to stringExpr$
 * 3) handle SETID(expr$) - Set the HTML id property to be the value of expr$
 * 4) handle TOOLTIP(expr$) - Set a tooltip for the imagebutton using the value of expr$
 * 5) handle ISNULL - Returns zero (or false)
 * 6) handle DEBUG$ - Returns the string "Imagebutton"

CSSClass
You can set the CSSClass tag for an imagebutton. This is handy if you want to add a border or assign a size. This requires some basic knowledge of CSS. (CSS means Cascading Style Sheets.) You can learn more here: http://www.w3schools.com/css/default.asp

You'll also want to visit SimpleCSSDesigns on this wiki.

The HTML tag for an imagebutton is "input type='image'" as in the HTML for an imagebutton

code html " code

The CSSCLASS definition should also begin with "input.". The "input" can be omitted, but the be sure to use the dot. Some possible imagebutton class names:

input.fancyImagebutton .fancyImagebutton

To invoke styles, use the **CSSCLASS** statement, placing the CSSCLASS name inside of quotation marks, without the "input.":


 * 1) handle CSSCLASS("fancyButton")

Here is a short demo that changes the size and border of an imagebutton. If no width or height is specified, the button takes the image size. When the width or height is styled, the image conforms to the size of the imagebutton.

code format="vbnet" 'create an imagebutton with sub event handler imagebutton #doStuff, "\runbutton.png", doStuff print " ":print

'create an imagebutton with branch label event handler imagebutton #doMore, "\openbutton.png", [doMore]

'some styles added CSSClass "input.fancyImagebutton", "{       Width: 150px;        Height: 150px;        Border-Width: Thick;        Border-Style: Outset;        Border-Color: #AAAAAA;    }"

wait
 * 1) doMore CSSCLASS("fancyImagebutton")

[doMore] print "EventKey$ is ";EventKey$ wait

sub doStuff key$ print " ":print print "Key$ is ";key$ end sub code

SETKEY
When the user clicks on an imagebutton and there is a key set on that imagebutton then the handler will use that key instead of the name of the handle. It will be passed into the sub if the handler is a sub. It will be assigned to the global variable EventKey$ if the handler is a branch label.

Here is a demo of **SETKEY** in action.

code format="vbnet" 'create an imagebutton with sub event handler imagebutton #doStuff, "/runbutton.png", doStuff print " " :print " "

'create an imagebutton with branch label event handler imagebutton #doMore, "/openbutton.png", [doMore]

wait
 * 1) doStuff setkey("New Do Stuff Key")
 * 2) doMore setkey("New Do More Key")

sub doStuff handle$ print " ":print "Handle is ";handle$ end sub

[doMore] print " ":print "Handle is ";EventKey$ wait code


 * setkey** can also pass numeric values

code format="vbnet" imagebutton #btn1,"\runbutton.png",doIt wait
 * 1) btn1 setkey(20)

sub doIt key print key*2 'more code end sub code

SETID
//To be added at a later date//

TOOLTIP
An imagebutton can display a tooltip when the mouse is hovering over it. Tooltips provide more information to the user and help the user to better navigate the webpage. This next code demonstrates adding a tooltip to the imagebutton.

code format="vbnet" 'create an imagebutton with sub event handler imagebutton #doStuff, "\runbutton.png", doStuff print:print

'add a tooltip to the imagebutton
 * 1) doStuff tooltip("Alright, already! I'm doing stuff!")

wait

sub doStuff handle$ print:print "Handle is ";handle$ end sub code

ISNULL and DEBUG$
This code demonstrates the **Debug$** and **IsNull** methods:

code format="vbnet" '#handle ISNULL //- Returns zero (or false)// print "Before creation, IsNull returns:" print #doStuff isnull

'create an imagebutton with sub event handler imagebutton #doStuff, "/runbutton.png", doStuff print:print print "Object is a ";#doStuff debug$ print "After creation, IsNull returns:" print #doStuff isnull wait

sub doStuff handle$ print " ":print "Handle is ";handle$ end sub code