Button Bars in HTML
This tutorial takes a previously made button bar, in this case a remote control unit,
and shows you how to use PSP and HTML to code this up for you web page. I'm going to assume you already know how to make a web page link work with a graphic before I start.
| Introduction Before we go any further, just hover your mouse over the buttons on the
left and you will see in the status bar, or in the popup window the target for
each of the buttons.
This technique is based on slicing up an original image to make smaller
graphics. This graphics are then in turn re-joined using HTML code
to make one single complete image.
|
 | Step 1:
- This is our starting image. You can see how to create this over at Making Remote Controls with Blade Pro. But of course
there are many different images you can use. These techniques are applicable to all.
- What we need to do is slice up this image into the separate buttons.
- Draw a rectangle around the first button
- Copy the selection and paste as a new document (Ctrl-C and Ctr-V)
- Save the new image
- Now move the selection to the next button. You can do this by selecting the mover
took and then using the right mouse button to move just the selection marquee.
Hints: Getting the selection just right can be tricky, you can double click on the
selection tool and enter numerical parameters for the selection.
It can be easier to use the crop tool, since you can simply adjust the edges of the crop tool.
In this case, make as many duplicates of the image as you need (Shift-D) and then crop out
each button as required.
- However you do it, you need to end up with this.
|
| Step 2: Next, we layout the images in an HTML table. We use the table layout to make
sure all our images are positioned vertically. In the example here, we have shown
the table with wide spacing and borders so you can see clearly how the table is constructed.
|
The exact code to do this is as follows.
1 <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
2 <TR><TD><IMG SRC="nb01.jpg"BORDER=0 ALT=""></TD></TR>
3 <TR><TD><A HREF="homepage.htm"><IMG SRC="nb02.jpg" BORDER=0 ALT="Home"></A></TD></TR>
4 <TR><TD><A HREF="mailpage.htm"><IMG SRC="nb03.jpg" BORDER=0 ALT="Mail"></A></TD></TR>
5 <TR><TD><A HREF="linkspage.htm"><IMG SRC="nb04.jpg" BORDER=0 ALT="Links"></A></TD></TR>
6 <TR><TD><A HREF="coolstuff.htm"><IMG SRC="nb05.jpg" BORDER=0 ALT="Cool"></A></TD></TR>
7 <TR><TD><A HREF="hotstuff.htm"><IMG SRC="nb06.jpg" BORDER=0 ALT="Hot"></A></TD></TR>
8 <TR><TD><IMG SRC="nb07.jpg" BORDER=0 ALT=""></TD></TR>
9 </TABLE>
|
Explanations:
Line 1: starts the table. The CELLPADDING and CELLSPACING entries remove any
white space around each table cells edge. The BORDER=0 ensures there is no table border
Line 2: is the top of our remote. This cell only has the image, no HREF link is required here. Note that we have set BORDER=0 in the image, to make sure there is no line
around the graphic.
Line 3: is our first link. Make sure the BORDER=0 is set otherwise the button
would be outlined. Also make sure you have an ALT="Name of page" entry, this makes
it easy to see where to link to while the page is loading or if the reader has graphics turned off.
Lines 4 to 7 continue in the same vein.
Line 8 is like the top of navigation control, and has no HREF
Line 9 closes off the table.
There are several shareware/freeware programs around which automate the process
of "dicing" the graphic and creating the HTML to go with it. My particular favourite
is "Shoestring Dicer" - search your preferred download site for a copy.
|