Interface

10. Now it is time for the coding. It may to seem very difficult, but believe me it is not. First what you need to do is to go to directory where you saved your interface and move the first html file to the images folder. Java script buttons III work only when all your files are in one folder. Open Java Scrip Button III and find the folder where you save your interface. Now you need to understand how it works. You need to select 4 files in a row. First one is first button normal position, second - first button mouse over position, third - html file and fourth - center image which will show up when you move mouse over first button. To select files simply click on them. So, first is "but1.jpg", second - "but1_on.jpg", third - html file, forth - "center1.jpg".
11. Continue with all buttons. Then type in the field as shown the name of center image file which will show up when your mouse is not over buttons - "center.jpg".
12. Now click on Generate and you will see a new screen with your code. Copy to clipboard and paste in your favorite HTML editor or what are you using for coding. Now you will need two html documents open in your editor. The code that you generated in Java script button III and your interface html document which you saved in PI. Now all that you need to do is to put Buttons III generated code in the PI generated code table. The first part of generated script between tags and you need to put in document Body before Table, then code for each button in table cell - but1 in but1 cell, but2 in but2 cell and so on. That's it. However if you have any questions or difficulties please feel free to e-mail me, I will do my best to help you.

Part 1

Back to tutorials index

Interface Tutorial