7. The Menus / 7.9 The Web Menu

7.9.4 Button Creator

A common task in web design is to create buttons. These buttons are quite often animated: if the mouse is over a button, the button will be preselected, if the mouse button is pressed, the onscreen button is pressed, too.

Button Creator simplifies exactly this job.

A small preview control shows the current button. Radio buttons allow to switch between the states Normal, Mouse Over and Pressed. All three states can differ with regard to color, shape, text and other effects. In order to coordinate the look of the three states, there is the All Same. If you press it, the two non-active states get the look of the active one. The list field controls which attributes are transferred.

Button controls the basic design of the button: the Color, the Shape and the size given by Width and Height. The shape can be one of various predefined shapes (see chapter 4.14). Style controls the styles, that you can assign to the button. These styles are used analogously to the layer style (see chapter 7.8.41).

The options group Text allow you to change the appearance of the caption of the button. Text is the content of the caption. Other options are the font, the font size and the Color. Position changes the vertical position of the text, thus it changes the baseline of the text. Style allows you to assign styles to the text.

URL for Button Pressed defines the URL, that will be shown, if the user clicks the button on the web page.

Help Message (Tooltip) is a short message, that will be shown, if the mouse stands still a while over the button on the web page.

By pressing Create Code the file select dialog appears. The filename entered in this dialog is used for saving a HTML-file containing the code to display the button. Additionally three image files with the same name, a continuous numbering and the extension ".gif" will be created. The code consists of two parts. The first one is a Javascript function:

<title>PhotoLine Button</title>

<script language="javascript" type="text/javascript">

 

Aqua1 = new Image();

Aqua1.src = "Aqua1.gif";

Aqua2 = new Image();

Aqua2.src = "Aqua2.gif";

Aqua3 = new Image();

Aqua3.src = "Aqua3.gif";

 

function show(buttonname, buttonvar)

{

document.images[buttonname].src=buttonvar.src;

}

</script>

The second part is the button itself:

<a href="mypage.htm" target="_self" onMouseout="show('Aqua', Aqua1);" onMouseup="show('Aqua', Aqua1);" onMouseover="show('Aqua', Aqua2);" onMousedown="show('Aqua', Aqua3);">

<img src="Aqua1.gif" border="0" alt="My Button" name="Aqua"></a>

Both parts have to be inserted in the corresponding parts of your web page: the Javascript code in the head-section, the button in the body-section.

If you want to use several buttons in one HTML-file, the Javascript-function "show" must only be inserted once, but the preloading ("Aqua1 = new Image(); ..." and the button code have to be inserted for every button.

If you want to use several buttons in one HTML-file, all buttons must have different names.