Bakers’ Dozen 2.0
Let’s make a listing template with just 13 HTML tags!

Bonus Lesson

We have now used all thirteen tags — just thirteen! — to create a nice looking and effective marketing platform; a listing template for your auctions. Here it is:

There are a lot of little things you can do to make this template YOURS. You could change out the set of backgrounds. You could use one of the other designs in the previous course. And, of course, you will put your own item title, description, pictures and terms. But one thing that stands out to me is that all those pictures take up a lot of room. And those are only small pictures. What if you had as many larger pictures? There are a few ways to get a lot of pictures into a smaller space.

One of those ways uses a little JavaScript magic not unlike what we did with the mailto link. This is a little more complex and a little tricky so you have to look at the code very carefully. What we want to do is create a grid of small pictures beside one of the regular size pictures, like this:

Next we want to make the small pictures, referred to as thumbnails, clickable in a special way so when you click your mouse on each one of them the larger picture is replaced by an image the same as the one you are clicking. Here’s what I mean. Try clicking on any of these thumbnails and see what happens:

In this example I have put the eight thumbnails to the right of the larger picture because we are dealing with all fairly small pictures which will fit in this fashion. For larger pictures, typically 500 to 600 pixels wide, I would probably put a row of thumbnails below the larger picture. The layout doesn’t matter. You design that to suit your needs. It is the process that is important here.

This process uses a table for the layout of the images and some inline javascript to handle the swapping of the larger picture when the thumbnails are clicked. Here’s what the code looks like:

At first glance the code appears pretty daunting but in reality it is not so bad. The opening line establishes the table and it is followed by two table rows, the first with five table data cells and the second with four. This may seem unusual at first since table rows in the same table typically have the same number of table data cells. How can one have five cells and the one beneath it only four? We will get to that in a moment. First, though, let’s look at the first line of code in detail:

This is a very typical table element. It has several attributes. The first three are old-style attributes, as is the last. The first two set their values to zero preventing them from doing funny things in different browsers. The third one sets cellspacing to 2 pixels which gives us just a little space between each of the table data (<td>) cells and their contents. The last attribute centers the table. The inline style attribute puts a single, dark grey, solid line, border around the whole table and sets the background color to white.

You may note that I haven’t set a width for the table. Tables are strange things in the HTML coding world. If you don’t set a width for them they tend to shrink down tightly around the contents of their various cells, finding their own size. This is very convenient for us in this instance because it would be a lot of fiddly arithmetic to figure out the actual size of the table, adding up the widths of all the graphics and the cell spacing and the borders… ugh! Thank goodness for strange, or convenient, table behaviour!

Now let’s look at the code for the first table row and the table data cells it contains. Remember, this first row has five cells. Can you see them?

Let’s separate them out so they show better:

This code is a little more complex than anything we have worked with previously in the course, but if you break it down into it’s component parts it really begins to make sense. Let’s look at the first table data cell in this first row:

Notice the highlighted attribute: rowspan=”2″ in this first cell. This tells the browser to set up the table with the first cell in the first row spanning down into the second (2) row. This accounts for why there are only four cells in the second row. This first cell of the first row is also the first cell for the second row making that row match (1 + 4 = 5) the first row’s five cells.

The style attribute of the table data element puts a dark grey, single line, border around this cell. We can see this in the examples above, and that this cell is set apart from those (the first and fifth thumbnails) adjacent to it. This separation is due to the cellpadding attribute in the table tag being set to a value “2″. This separates each cell from those adjacent to it by two pixels.

The contents of the cell is just a standard image tag. It contains the URL of the large image displayed on the left of the picture grouping. But it contains one other thing you may not be used to in an image tag:

The name attribute allows us to reference this particular image tag and, using JavaScript, we can replace the existing picture with another one. Let’s look at the second table data cell in this first table row:

This contains the image tag of the first thumbnail (and it’s URL), but it also contains something that doesn’t quite look like HTML:

This is the inline javascript that does the work of swaping the pictures. What it says is: when the mouse is clicked on this image (onclick) then swap the image in this document named “picture” (document.picture.src) to the URL shown here. The key is that the “picture” in document.picture.src in this code matches with “picture” in the attribute name=”picture” in the image tag for the large image. If you look at each of the remaining data cells you will see there is an image tag with this javascript code, but each referencing a different large image URL. Each one of the thumbnails, when clicked, will swap a different large image into the left picture position.

When we put this picture code into our template here is what we get:

Beautiful Muti-Colored eBay Trolls This auction is for this rare and complete matched set of pastel eBay trolls, including bubba blue, audrey aqua, geneveve green, charlotte chartreuse, mellow yellow, ollie orange, rhonda red and peter purple. These wonderful critters will bring hours of excitement to your life as they stalk your chat board posts and leave rude messages everywhere you go. Don’t waste any time. You can have the whole set today for just one price. Bid now before someone else takes this treasure from out of your grasp. This wonderful collector’s set would make an excellent gift for that annoying person who has everything!   • These little guys are just so cute.   • They come already paper trained — guaranteed!   • A color for every day of the week and one to spare.   • Never find yourself without your own personal eBay troll again. TERMS OF SERVICE US PAYMENTS: We accept US check (order held until check clears), money order, or PayPal, including credit cards. CANADIAN PAYMENTS: PayPal is preferred. Cheques and money orders can be paid in Canada. Contact us for special instructions. OTHER INTERNATIONAL PAYMENTS: We will accept only Paypal from all other countries. RESIDENTS OF KANSAS: please add 7.05% for state and local sales tax. Email any questions to: thewiz@ourhutch.com. SHIPPING: Exact postage will be confirmed after the end of the auction. We do not charge over the actual postage amount. We will gladly ship internationally. Please contact us for details. If you win more than one of our auctions, we will be happy to combine the shipping which usually saves you money. Some sellers combine shipping by adding up individual shipping rates for each auction, then subtract a buck or two. Not us. We put as much in each box as we safely can, then weigh it, calculate the shipping at the USPS website, and charge exactly what the postage is. We offer only Insured Priority Mail for this item. OTHER: All auctions are for used merchandise, sold as is, unless otherwise noted. At the end of this auction, we will email the winner with payment instructions and other details. Please watch for and read this carefully to avoid unnecessary errors. Listings | eBay Store | Send Email I am a Trading Assistant – I can sell items for you! Copyright © 2008 by Stephen B. Henry

In some instances this click-to-view-large-image picture grouping is very useful to display a number of images in a smaller area. The best way to do this is, as in the above example, with two pre-sized images for each picture view: the large display image and the smaller thumbnail, like this:

You might also notice that in this case the thumbnail has a dark grey, single line, border already on the image where as the larger view does not. These images were actually created for a different purpose and the dark border on the thumbnails was necessary. Since it was already there I simply added a matching border to the HTML code for the cell containing the larger image. I also set the table background color to white in order to handle some small spacing issues in the table due to the larger image not being exactly the height of the two rows of smaller thumbnails. Without both of these additions to the code the pictures in the template would look like this:

Beautiful Muti-Colored eBay Trolls

It’s not really bad but without the white background for the table you can see that the larger image on the left does not completely fill the cell. Without the border around the cell the image looks a little unfinished. You can see, however, that little imperfections like this can be disguised easily with the right HTML coding. It saves a lot of work re-editing graphics.

HTML, though easy to use, is a powerful language with many features you can use to create wonderful listing templates. With what you have learned here — and will continue to learn if you go back over this course to better grasp areas you may not be sure of — you will never have to put up with ordinary looking listings. YOU are NOW in control of YOUR own listings!

Thank you for completing both parts of this course. Please be sure to review the additional bonus material on the course home page. Return to this course as often as you wish. And do keep my email address around for any questions about this course in particular or HTML questions in general. I’m always glad to help out with HTML coding issues where I can.

Steve/wiz.
January, 2008.
[ top of page ]