Using 1in3 graphic buttons
The 1in3 graphic button is simple yet powerfull way og making a graphic button and use very little bandwidth. In fact all buttons on a site only takes a few hundred bytes in all!This is done by using the same GIF image in all buttons and put the text on top of that.
The button consist of three parts: left site, the middle and the right side. The middel part is then streched to a length that fits the text.
| Left GIF | Middel GIF | Right GIF |
| 
| 
|
| |
With the help of the CSS classes the javascript place the text in the button.
To get the button pressed effect, you use a similar set of three images, but changes sĺ the button looks inset (or at least different).
So you get two times three sets of images, looking like this:
| Normal | Pressed | ||||||
|
|
The javascript will then use the appropriate images and CSS classes to create the button pressed effect.
You need to specify which images to use. The easiest way to do this, is to use the SetMenuImages function:
setMenuImages(<menu id>,<path to images> ,<middel image>,<left image>,<right image> ,<pressed middel image>,<pressed left image>,<pressed right image> );
any parameter execpt menu id, can be empty (null). (You can also set the images one at a time with the SetMenu function. See the refferance guide.)
A menu can then look like this:
Here is the code used for this menu:
<HTML>
<HEAD>
<script>
<link href="menu.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="jsmenu.js"></script>
<script>
//----------------------------------------------------
// Define menus
//----------------------------------------------------
menu=menu_make('menu',[
['Test 1','test1.html']
,['Test 2',[ ... ]]
,['Test 3',[ ... ]]
,['Test 4',[ ... ]]
]);
//----------------------------------------------------
// Set menu images and properties
//----------------------------------------------------
setMenuImages(menu,'','but.gif','butl.gif','butr.gif',
'butsel.gif','butsell.gif','butselr.gif');
</script>
</head>
<body>
<div id="menu"></div>
</body>
</html>