Image

Description

The Image control is used to display an image. The image can be any common format, including jpg, bmp, gif or png. The image is scaled to fit the bounds.

To add an image to your app, choose the Image icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need, then add functions to your code to respond to the events that come from the button: usually, just onclick.

Images should be in your project folder or a subfolder.

For more control of images at runtime, use the PictureBox control.

If you are using AppStudio on Mac OS, the color profile of your images needs to be set to a standard value, such as Adobe RGB. You will get error message (which can be ignored) until you fix this. The message you will get will be something like "AppStudio Warning iCCP: known incorrect sRGH profile". Most Mac OS image processing utilities have an option to change the color profile.

Properties

Standard properties are supported, plus:

src	Sets the image to be displayed. For example, "mario.jpg". The file should be in the current project or a subfolder of it.

Events

Standard events are supported.

Example (Basic)

Rem Image Example
Function Image1_onmouseover()
  Msgbox "Over!"
End Function

To change an image at runtime, use

Image1.src = "a.jpg"

To get the name of the image clicked on:

Function Image1_onclick()
  MsgBox event.currentTarget.id
End Function

Example (JavaScript)

//Image Example
Image1.onmouseover = function() {
  alert("Over!");
}

To change an image at runtime, use

Image1.firstChild.src = "a.jpg";

To get the name of the image clicked on:

Image1.onclick = function() {
  alert(event.currentTarget.id);
}

Output

Related Items

PictureBox