The drawing
In a paint program you can make the buttons side aside in one image. On the
left hand are all buttons in the normal state. On the right hand all buttons in
the push down state if the mouse will be hovering over them. The buttons left
and right have the same width of course. You will get something like this:
(width is here: 2 times 150px; height 3 times 25px)
Easy html
In the html of the page there will be only something like:
<ul id="buttonblock"> <li id="button1"><a href="link1.htm"></a></li> <li id="button2"><a href="link2.htm"></a></li> <li id="button3"><a href="link3.htm"></a></li> </ul>
Copy and paste!
The exact code is in two small copy/paste files:
- Click here, copy the styles, and paste them somewhere between the <head> and </head> in the page.
- Click here, copy the html, and paste it where the buttons have to display in the page.
- Attention! In Firefox the code is appearing directly in a new window.
In Internet Explorer these links don't show the codes, but an apparently empty page will come. Not true! Go to menu View, click on Source Code. Then the code will show in a new Notepad window.
In the code is pointed what you have to change to use your own image and your own links.
Everything together you can see in the source code of this page.
It is possible to give a button a different height, if needed, with a small adaptation
of the code. And in case you want more buttons, you just extend the image; the
code lines for a new button are easy to implement.
Success!
[short English translation]
17 aug. 2006
