Buttons: Images

Every HTML element can be put in a button, including images. In . three ways are shown to create a pan/zoom menu. The first just repeats the previous page. The second one creates the buttons indivdually, with <img> elements as texts. The third one is an abbreviation of the second one, as menus with images are very common: a menu is created with regular text buttons. However, if the text ends with .gif, .png or .png, the image of that name is inserted in its place. The function "setIcondir()" points to the directory the images are in, in this case the subdirectory "graphics".

It is alse possible to make menus containing a larger HTML element, as in At the top is a regular window with two input fields. Below that is a movable menu with only one button; this button contains an image with a fixed size of 50*50. Initially the image is empty, but when a map is returned from MapServer, the "setExecOnReturn()" method of the window sets the source of this image to the image returned from MapServer. Note that the image is resized by the browser to 50*50 pixels, the size specified in the style item of the image. When a different map is selected, the smaller image is updated automatically.

This one-button menu behaves exactly like other menus, so it can be moved independently from the main window. In this case, the menu was created as a permanent menu, but it could just as well have been made part of a submenu,to pop up and disappear as desired. All MapServer generated HTML elements, like legends, scalebars, reference maps etc can be put it such menus. This makes it possible to offer much more information without cluttering the browser window.

You can also put a complete scrollable HTML element in a button, like in , from the Amsterdam presentation. A scrollable SPAN element is created, called streetSpan, which is put in a button; the button is put in a menu. Streetnames are added as individual SPAN elements to streetSpan. The names and coordinates of the street are put in the SPAN as internal variables. Every streetname has a click event defined, which reads these variables and puts them on the screen.