Image - Revision history

Ghenne: /* Properties */

2026-02-19T20:56:31Z

Properties

← Older revision		Revision as of 20:56, 19 February 2026
Line 40:		Line 40:
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	\| src \|\| ~~Sets the~~ image to be ~~displayed~~. ~~For example~~, ~~"mario~~.~~jpg"~~. ~~The file should be in the current project or a subfolder of it~~.		\| src \|\| Location of image. Do not add files to /nsb. Cannot be a URL. Can be a base64 data URI (e.g., data:image/png;base64,...).
	\|}		\|}

2019-11-16T15:34:11Z

← Older revision		Revision as of 15:34, 16 November 2019
Line 3:		Line 3:
	== Description ==		== 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.		The Image control is used to display an image. The image can be any common format, including jpg, bmp, gif, png or svg. 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.		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.

2019-07-24T16:09:01Z

Example

← Older revision		Revision as of 16:09, 24 July 2019
Line 76:		Line 76:
	Image1.src = "a.jpg"		Image1.src = "a.jpg"

	' To get the name of the image clicked on:		' To get the name of the image clicked on:
	Function Image1_onclick()		Function Image1_onclick()
	MsgBox event.currentTarget.id		MsgBox event.currentTarget.id

2019-07-24T16:08:26Z

Example

← Older revision		Revision as of 16:08, 24 July 2019
Line 57:		Line 57:
	}		}

	' To change an image at runtime, use		// To change an image at runtime, use
	Image1.firstChild.src = "a.jpg";		Image1.firstChild.src = "a.jpg";

	' To get the name of the image clicked on:		// To get the name of the image clicked on:
	Image1.onclick = function() {		Image1.onclick = function() {
	alert(event.currentTarget.id);		alert(event.currentTarget.id);

2019-07-24T16:08:07Z

Example

← Older revision		Revision as of 16:08, 24 July 2019
Line 59:		Line 59:
	' To change an image at runtime, use		' To change an image at runtime, use
	Image1.firstChild.src = "a.jpg";		Image1.firstChild.src = "a.jpg";


	' To get the name of the image clicked on:		' To get the name of the image clicked on:
Line 78:		Line 77:

	' To get the name of the image clicked on:		' To get the name of the image clicked on:

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

2019-07-24T16:07:40Z

← Older revision		Revision as of 16:07, 24 July 2019
Line 47:		Line 47:
	Standard [[events\|events]] are supported.		Standard [[events\|events]] are supported.

	== Example ~~(Basic)~~ ==		== Example ==

	<~~pre~~>		<tabber>
			JavaScript=
			<syntaxhighlight lang="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);
			}</syntaxhighlight>
			\|-\|
			BASIC=
			<syntaxhighlight lang="vb.net">
	Rem Image Example		Rem Image Example
	Function Image1_onmouseover()		Function Image1_onmouseover()
	Msgbox "Over!"		Msgbox "Over!"
	End Function		End Function
	~~</pre>~~

	To change an image at runtime, use		' To change an image at runtime, use
	<pre>		<pre>
	Image1.src = "a.jpg"		Image1.src = "a.jpg"
	~~</pre>~~

	To get the name of the image clicked on:		' To get the name of the image clicked on:
	~~<pre>~~
	Function Image1_onclick()		Function Image1_onclick()
	MsgBox event.currentTarget.id		MsgBox event.currentTarget.id
	End Function		End Function</syntaxhighlight>
	~~</pre>~~		</tabber>

	~~== Example (JavaScript) ==~~
	~~<pre>~~
	~~//Image Example~~
	~~Image1.onmouseover = function() {~~
	~~alert("Over!");~~
	}
	~~</pre>~~

	~~To change an image at runtime, use~~
	~~<pre>~~
	~~Image1.firstChild.src = "a.jpg";~~
	</~~pre~~>

	~~To get the name of the image clicked on:~~
	~~<pre>~~
	~~Image1.onclick = function() {~~
	~~alert(event.currentTarget.id);~~
	}
	</~~pre~~>

	== Output ==		== Output ==

2019-03-09T22:14:05Z

2016-09-14T15:07:01Z

← Older revision		Revision as of 15:07, 14 September 2016
Line 27:		Line 27:
	QR Codes can be used to read in a line of text or a URL. Using an API from Google, it is easy to display in a QR Code.		QR Codes can be used to read in a line of text or a URL. Using an API from Google, it is easy to display in a QR Code.

	If you would like to display a QR Code offline, or without using the Google API, use the QRCode control.		If you would like to display a QR Code offline, or without using the Google API, use the [[QRCode]] control.
	<pre>		<pre>
	text = "http://www.nsbasic.com"		text = "http://www.nsbasic.com"

2016-09-14T15:05:47Z

Display a QR Code

← Older revision		Revision as of 15:05, 14 September 2016
Line 26:		Line 26:

	QR Codes can be used to read in a line of text or a URL. Using an API from Google, it is easy to display in a QR Code.		QR Codes can be used to read in a line of text or a URL. Using an API from Google, it is easy to display in a QR Code.

			If you would like to display a QR Code offline, or without using the Google API, use the QRCode control.
	<pre>		<pre>
	text = "http://www.nsbasic.com"		text = "http://www.nsbasic.com"

2016-03-10T18:48:44Z

Display a QR Code

← Older revision		Revision as of 18:48, 10 March 2016
Line 30:		Line 30:
	url = "https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl="		url = "https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl="
	Image1.src = url + text		Image1.src = url + text
	<pre>		</pre>
	[[File:Qrcode.png~~\|thumbnail~~]]		[[File:Qrcode.png]]

	== Properties ==		== Properties ==