Copyright Michael Karbo, Denmark, Europe.

  • Next chapter.
  • Previous chapter.

    Chapter 27. Graphic links with buttons

    One of the more elegant effects on many home pages is to use graphic links with rollover effect. You simply replace the regular text links with small buttons. The small buttons contain the same text, but the button itself is a graphics item.

    Advantages of graphic links

    There are different and significant advantages in using buttons for links:

    ·        You can use any font, -size and -color for the button’s text.

    ·        You can make rollover effect, so text for example changes color when the mouse cursor is moved across it

           So with graphics links you get many more flexible design options than with conventional text links.

       The disadvantage of this is that it is very time consuming work. Fist the buttons have to be made in Photoshop or another graphics program, and that is time consuming. Then the page has to be coded with JavaScript, and that is also relatively complicated. So this is not a technique to be used just anywhere in your various home pages, it will be to much work. But graphic links are highly recommendable for certain tasks – like the left window in our frame set

    See the buttons

    Actually there are two versions ever button. There is a blue button with white text, and there is a white button with blue text. The last button is only visible when the mouse cursor rests on it.

    The buttons work like links; if you click on them you will see new articles in the right window of the frame set.

    In the following I will show an example on how you can use the buttons as links. I start with the frame set that was designed earlier in this book. The coding of all the necessary buttons is quite comprehensive, so you will never do all work yourself; then you would never get finished! But you will see and test the system so it is ready to use in your home pages.

    Getting ready

    You will continue to work with the frame sets you have used in previous exercises.

    1.   If it is not already on your screen then open Notetab. Close all open documents and then open the two files index.htm and left.htm.

    2.   Save left.htm immediately under the new name left2.htm (that will preserve the original left.htm on your hard disk).

    3.   Correct index.htm, so the frame set reads left2.htm in the left window like here:


    1.   Save index.htm and test the in the browser. Now you see the same frames as before. You have just changed the name of the file in the left window.

    2.   Create a folder named button using the Explorer. It has to be a sub folder in the folder where you have the HTML document left.htm placed in. If you have followed the exercises diligently, it will be named C:\HTML\buttons.

    3.   Now you have to get the 18 small buttons that are needed in your menu. Open the home page for this book. Find the link Buttons for left2.htm:

    4.   Then get the 18 buttons as described. Save them in the folder buttons.

    5.   Check in explorer that the 18 small files are in the right folder:


    6.   The 18 small graphic files are very simple; each has a short text, and each text appears in two versions: white print on blue background and vice versa.

    Figure 59. Here you see the 18 buttons to be used in the menu.

    A new navigation menu

    Now you are ready to code the menu.

    1.   You need to have the HTML document left2.htm active in NoteTab. Start by deleting all contents in the BODY section. Those are all the old text links – get rid of them all! But do not delete the BODY start code.

    2.   Then look at the home page for this book again. Follow the link Code to left2.htm. Copy the first very large code portion to the HEAD sec­tion.

    3.   You need to select several lines, but that is not difficult; just drag down over the screen with the mouse cursor. Be careful to include all code down to and include </SCRIPT>:

    4.   Make a copy and insert it in the HEAD section of the left2.htm  (just before </HEAD>)

    5.   Repeat that operation with the code to the BODY section, which is also found on the home page for this book (on the same page). Then insert this copy in the BODY section of the left2.htm  (immediately after SIZE=”-3”>).

    6.   Save the document. Activate index.htm, and test it in the browser. Now the frame set should work and look as shown below:

    Figure 60. Now there is a graphics menu in the left window.

    But one menu item is still missing …

    You might have noticed that there are only 8 links in the left window (Figure 60). One link is missing (to the Zebra page), and that is not an error. You have to make that last link yourself. Then you get to learn that code:

    Start by studying the HEAD section in left2.htm. That is a very long task, but if you check you can see that there are two sets of code lines for each button. Let us take a closer look at them. First find these lines and notice the accentuated codes:

    That goes for button number 8, which is called inmg8. These lines define the ”undelying” button (vew.png). That is the button that displays the text Venedig with blue text on a white background.

    Further down in the HEAD section we find a couple of lines that define  the ”match button” (with white text on blue background). The button is still named img8, and the graphics file is now called veb.png:


    These two code portions make the basis for the Venezia button. But we need an IMG code to make the button visible on the screen. That is there also, down in the BODY section where the link code is also located:

    Notice the last lines above. The name inmg8 is included just like in the previous lines. The file name veb.png is also repeated. So there are all of three code blocks for each button.

    1.   Now you have to insert a copy of each of the three blocks to get the last button in place.
    Do this now: select, copy and insert the three   blocks shown. The copies shall be inserted individually just below the lines shown in the HEAD- and BODY-sections. Then adjust the three blocks so they read img9 in stead of img8.

    2.   Also change the file names from vew.png to zew.png and from veb.png to zeb.png.

    3.   Finally change the link file in the bottom of the three code blocks to site1/zebra.htm.

    4.   Save the HTML document and test the result in the browser. Isn’t that just neat?

    You have now made a menu with graphic links and roll over. But actually you did not do not much of this yourself. Don’t worry about that. I have also often borrowed code from the net. That is how it is done – you borrow and reuse – especially JavaScripts that only few people understand well. That is immaterial as long as it works! You can reuse the code I have shown here on your own pages – it is relatively to modify. Actually the big problem is to create the buttons …

    About making the buttons

    In the previous exercise you started b y getting 18 small graphics files from the home page for this book. I had readied them so they were usable in your menu. But what if you want a similar on your home page, then you must make the buttons yourself


    Figure 61. Here I use Macromedia Fireworks to make a navigation panel. The program makes both buttons and necessary JavaScript.

    Some programs can make both buttons and corresponding code for you (see Figure 61). There you can also make a complete navigation menu with buttons, code and all. Then you don’t have to mess with code JavaScript. The disadvantage is that you loose control over the code. It is typically impossible to decipher, and you have no way to modify it.

    The more manual method

    If you want to make the button yourself, that is also easily done. Let me briefly (and rather con­centrated) show how you can do that.

    1.   You need access to a image processing program such as Adobe Photoshop, Corel PhotoPaint, Ulead PhotoImpact, Microsoft PhotoDraw, or whatever you have available. The program must be able to superimpose text on graphic, and it must be able to save in either GIF- or PNG-formats.

    2.   First I will open a new drawing, and there I am asked to specify the size. That is always the case in picture processing programs, and the size can be specified in cm or pixels.

    For screen display you would measure in pixels, and I usually make buttons in 125 X 20 pixels:

    3.   I open two new pictures in the same size – one for each of the two buttons.

    4.   Then I have to select color for the button background and color for text. I stay with the pure colors, pure white (FFFFFF) and pure blue (0000FF).

    5.   In my opinion the pure colors yield the best result that all net users can read. If you select more unique colors, you risk that it may not look good on all screens, since screens are very different.

    6.   I make the one button white background color, and I make the other one blue:

    7.   Then I need to select a font. In this example I chose Verdana size 12. That works well with the button size.

    8.   Then I select my text tool and enter the same text on both buttons. The one with blue print, the other with white. That was preparatory.

    Figure 62. Here I work with the two buttons simultaneously. One has white text on blue background, and the other the opposite. Both buttons occupy 125 x 20 pixels.

    Save the buttons

    Once I got that far along like in Figure 62 the rest is relatively easy. Now I just need to save both buttons under a suitable name. I chose zeb.png and zew.png (for ZebraBlue and ZebraWhite).

    I can save the buttons either in GIF or in PNG format. The two graphics formats are equally well suited for buttons; here I chose the PNG format.

    Then I over write the two buttons with new text and save both under a new name. I repeat this for all the texts, until I have made the desired number of buttons – half with white, the other half with blue.

    The procedure described probably sounds quite easy. However in practice it takes time – at least the first time you try it. You have to watch your p’s and q’s while you do it, and it is advan­ta­geous to copy the texts and corresponding file names on piece of paper, so you don’t have to think about that while you sit and click in the picture-processing program. Have fun!

  • Next chapter.
  • Previous chapter.

  • HTML Tutorial Overview.

  • Get the files for this tutorial (opens in a new window)