Softsteel Solutions

Lesson 13: Adding images to a page and changing the display with a timer

In this tutorial we cover WML's support for images, and how to make events occur after a specified amount of time. These two features are often found together, as it is common for sites to have image-heavy site entrances, followed by automatic entry into the site proper.

Most WAP microbrowsers currently support just one image format, 'wireless bitmap format', or WBMP. WBMP only gives black and white images. Since converting colour images directly into WBMP format gives patchy results, it is probably best to use a paint tool to produce a distinct black and white image prior to converting it to WBMP.

The markup for images is very similar to that used in html. The base element is the empty tag

<img/>

The main two attributes for the img element are 'src', which takes the URI (location) of the image, and 'alt', which provides an alternative text string for the image. Because some browsers are still not happy about showing pictures, it is best always to provide an alternative text string.

In the example code below you will see that we also specify 'height' and 'width' attributes for our image. These are less well-supported than the attributes above - as are 'vspace' [white space above and below], 'hspace' [white space left and right], and 'align' [top, middle or bottom].

WBMP editors can be found in various places, including the WAP development toolkits provided by phone manufacturers. In addition, a plugin for paint shop pro and PhotoShop to allow these programs to save files in a .wmbp format is available from http://www.rcp.co.uk/distributed/Downloads.

Making use of timer events involves two parts - setting the timer, and specifying something to happen once the timer counts down to zero. The first part of this procedure involves giving a number to the 'value' attribute of the 'timer' element, as in:

<timer value="10"/>

Note that the value attribute is measured in tenths of a second, so this code sets a timer to count down from one second. Once the timer has counted down, an 'ontimer' event is generated. One can specify an action to occur given this event with the following kind of code (this tells the browser to load the second card ):

There is a shorter way of writing this command, however, which has been included in the example code below (see line 4). This code shows our logo for 1 second and then moves on to more important things. Notice, though, that a static navigation element has been included from the first card. This is to account for the number of microbrowsers which don't currently support the timer event.

The Softsteel Logo