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.