Ajax JavaScript CSS HTML 5 DOM


Just as one can display a text, either in a page, or in any graphic component of the interface, it is possible to put images on the page or in the components and in particular in buttons.


One inserts an image with the image tag and the file is defined with the src attribute.

<image src= " kauai.jpg "/>

Images and button

As it is saw in the chapter about buttons, one add an image to a button with the image attribute to which one assigns the name of the file.

<button label= "Click"  image="Click" />

By default, the image is on the left and the text on the right. The dir attribute makes it possible to change these positions with the reverse value which places the image on the right.

In the same way, the oritentation by default is horizontal, image and text on the same plan, but with the orient attribute and the vertical value, the image is at top and the text at bottom.

<button label="Clic" image="save.gif" orient="vertical"  />
Licence: (c) 2007 Xul.fr