This template uses nested tables to create a very colorful multi-layer border. The outside border is a pulsating blue, with a pulsating red in the middle, and a pulsating gold as the background for the description. It's a very neat effect, quite different than what you find in a typical eBay listing.
The auction code itself is relatively simple, with space for two photos; the first photo can be as large as you want, the second photo is limited to a width of 150 pixels. In the code, replace the filenames for the background images (
bluestripbackground.jpg, redstripbackground.jpg
, and
goldstripbackground.jpg
) with the full URLs and filenames after you've uploaded the files to your own photo hosting server.
Template 10.2. Bullets and Pictures
This template is ideal for any item where you need to present a lot of detailed features. The features are presented in a bulleted list in the right column, with the terms of sale at the bottom of that column. The wider left column includes the title and descriptive text, as well as a click-to-enlarge picture gallery. Visual interest is accomplished via the wide color border and the graphic banner at the top of the listing.
The click-to-enlarge picture gallery accommodates four pictures; you'll need to create both regular-
sized
and thumbnail versions of all your photos, and replace the
URL-BIG
and
URL-SMALL
text with the appropriate URLs and filenames. Also remember to replace
[USERID]
in the "other auctions" code with your own eBay ID. Make sure to copy the
greenbanner.jpg
file to your own photo host, and change the
<img>
reference to the new URL and filename.
<table width="100%" cellpadding=40 cellspacing=0 border=1
bgcolor="darkgreen">
<tr>
<td width="100%">
<table width=100% cellpadding=5 cellspacing=0 border=1
bgcolor="white">
<tr>
<td colspan="2">
<img src="greenbanner.jpg" width="100%">
</td>
</tr>
<tr>
<td width="70%" valign="top" >
<p style="font-family: Arial; font-size: 36pt;
font-weight: bold; color: darkgreen;
text-align: center">
Auction Title
</p>
<p style="font-family: Arial; font-size: 18pt;
font-weight: bold; color: black; text-align: center">
Auction Subtitle
</p>
<p style="font-family: Arial; text-align: left">
This is the text for the first paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough.
You don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<p style="font-family: Arial; text-align: left">
This is the text for the second paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough.
You don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<table align="center" cellspacing="20" height="500">
<tr>
<td>
<center>
<img src="
URL1-BIG
" height="400" border="0"
alt name="the_pic"><br>
<a href="#"; onClick="document.the_pic.src='
URL1-BIG
';return false;">
<img src="URL1-SMALL" border="0"></a>
<a href="#"; onClick="document.the_pic.src= '
URL2-BIG
';return false;">
<img src="
URL2-SMALL
" border="0"></a>
<a href="#"; onClick="document.the_pic.src= '
URL3-BIG
';return false;">
<img src="
URL3-SMALL
" border="0"></a>
<a href="#"; onClick="document.the_pic.src= '
URL4-BIG
';return false;">
<img src="
URL4-SMALL
" border="0"></a>
</center>
<p style="text-align: center; font-family: Arial;
font-weight: bold; color: darkgreen;
font-size: 10pt">
Click on thumbnails to enlarge
</p>
</td>
</tr>
</table>
</td>
<td bgcolor="#DDDDDD" width="30%" valign="top">
<p style="font-family: Arial; font-size: 14pt;
font-weight: bold; color: darkgreen">
This item includes:
</p>
<ul style="font-family: Arial; font-size: 10pt">
<li style="margin-bottom: 10pt">Bullet point</li>
<li style="margin-bottom: 10pt">Bullet point</li>
<li style="margin-bottom: 10pt">Bullet point</li>
<li style="margin-bottom: 10pt">Bullet point</li>
<li style="margin-bottom: 10pt">Bullet point</li>
<li style="margin-bottom: 10pt">Bullet point</li>
<li style="margin-bottom: 10pt">Bullet point</li>
<li style="margin-bottom: 10pt">Bullet point</li>
<li style="margin-bottom: 10pt">Bullet point</li>
<li style="margin-bottom: 10pt">Bullet point</li>
</ul>
<hr>
<p style="font-family: Arial; font-size: 10 pt">
<strong>Terms of Sale</strong><br>
I accept credit cards via PayPal, cashier's checks,
money orders, and personal checks. (Personal checks
will delay shipment for ten working days.)
Will ship via USPS Priority Mail. Actual shipping
charges calculated at end of auction.
Insurance optional, extra.
</p>
<hr>
<p style="font-weight: bold; font-family: Arial">
<a href="http://search.ebay.com/_W0QQsassZ[
USERID
]QQhtZ-1">
Click here to view my other auctions
</a>
</p>
</td>
</tr>
</table>
</table>
Template 10.3. Banners and Backgrounds
This is a nice-looking template for when you have a single photo to present. It uses color-coordinated top and bottom banners and puts the main text against a similar color background. A white background is used behind the title (which is in the
darker
color) and the terms of service. Notice also the graphic links to your other auctions and About Me page.
This is relatively simple code. We start with the top banner (flush left, since it fades to white on the right), followed by centered title and subtitle in the banner color. Then it's a two-column table with background the same color as the banner and title text. After the table are the other auctions and About Me graphic links, followed by the short bottom banner, centered on the page. Remember to replace
[USERID]
and
USERID
with your eBay
User
ID. In addition, make sure you upload the
tealbanner.jpg, tealbottom.jpg, aboutmegraphic.jpg
, and
auctiongraphic.jpg
graphics files to your picture host, and insert the full URLs of their new locations.
<img src="tealbanner.jpg" width=95% >
<p style="font-size: 36pt; font-weight: bold;
color: teal; text-align: center">
Auction Title
</p>
<p style="font-size: 18pt; font-weight: bold;
color: teal; text-align: center">
Auction Subtitle
</p>
<table bgcolor="teal" cellpadding="10">
<tr>
<td width="300">
<img src="
URL
" width="300">
</td>
<td valign="top">
<p style="font-size: 14pt; font-weight: bold;
color: white; text-align: left">
This is the overview paragraph. It should be relatively
short, no more than 2-3 sentences long.
</p>
<p style="font-size: 12pt; color: white;
text-align: left">
This is the text for the first paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough.
You don't want to make this paragraph too long for
potential buyers to read. Include all the details you
need, but no more than necessary.
</p>
<p style="font-size: 12pt; color: white;
text-align: left">
This is the text for the second paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
</td>
</tr>
</table>
<p style="font-size: 10pt; color: darkblue;
text-align: center; font-weight: bold">
Sold as-is. Shipment via USPS Media Mail. I accept PayPal,
cashier's check, money order, or personal check.
</p>
<center>
<p>
<a href="http://search.ebay.com/_W0QQsassZ[
USERID
]QQhtZ-1">
<img src="auctiongraphic.jpg" border="0">
</a>
<a href="http://cgi3.ebay.com/ws/ eBayISAPI.dll?ViewUserPage&userid=
USERID
">
<img src="aboutmegraphic.jpg" border="0">
</a>
</p>
<img src="tealbottom.jpg" width="95%" >
</center>
Template 10.4. Picture Column
Here's a nice-looking template for when you have a lot of product photos. All the photos are aligned vertically in the right column. The main text appears in the wide center column, and the photos are balanced by a vertical graphic image in the narrow left column. Each picture is a click-to-enlarge link, and the Terms of Sale goes in the bottom of the center column, under a graphic horizontal rule.
As written, this code allows for five pictures in the right column. You can include additional photos by inserting more
<a href>
and
<img>
tags at the end of the list, or use fewer photos by deleting a line or two. Remember to replace all the
URL1
,
URL2
, and similar codes with the full URLs of your photos; you only have to link to large photos, as the code resizes the photos to a width of 100 pixels to fit within the narrow column. In addition, make sure you upload the
redside.jpg
graphics file to your picture host, and insert the full URL of its new location.
<table bgcolor="#FFFFCC" cellpadding="10"
width="765" align="center">
<tr>
<td width="65" background="redside.jpg">
</td>
<td width="600" valign="top">
<p style="font-size: 36pt; font-weight: bold;
text-align: left; color: darkred; margin-bottom: 0">
Auction Title
</p>
<p style="font-size: 24pt; font-weight: bold;
text-align: left; color: red; margin-top: 0">
Auction Subtitle
</p>
<p style="font-size: 12pt; text-align: left">
This is the text for the first paragraph of the
item description. The text can be as long as you
like, although 4-5 sentences is probably long
enough. You don't want to make this paragraph too
long for potential buyers to read. Include all
the details you need, but no more than necessary.
</p>
<ul style="font-size: 12pt">
<li>Bullet text</li>
<li>Bullet text</li>
<li>Bullet text</li>
<li>Bullet text</li>
</ul>
<p style="font-size: 12pt; text-align: left">
This is the text for the second paragraph of the
item description. The text can be as long as you
like, although 4-5 sentences is probably long
enough. You don't want to make this paragraph too
long for potential buyers to read. Include all
the details you need, but no more than necessary.
</p>
<hr color="darkred" width="200" size="8">
<p style="font-size: 10pt; text-align: left;
color: darkred">
<strong>Terms of Sale</strong><br>
I accept credit cards via PayPal, cashier's checks,
money orders, and personal checks. (Personal checks
will delay shipment for ten working days.) Will
ship via USPS Priority Mail. Actual shipping
charges calculated at end of auction. Insurance
optional, extra.
</p>
<p style="font-size: 12 pt; font-weight: bold">
<a href="http://search.ebay.com/ _W0QQsassZ[
USERID
]QQhtZ-1">
Click here to view my other auctions
</a>
</p>
</td>
<td width="100" valign="top">
<p><a href="
URL1
" target="_blank">
<img src="
URL1
" width="100"></a></p>
<p><a href="
URL2
" target="_blank">
<img src="
URL2
" width="100"></a></p>
<p><a href="
URL3
" target="_blank">
<img src="
URL3
" width="100"></a></p>
<p><a href="
URL4
" target="_blank">
<img src="
URL4
" width="100"></a></p>
<p><a href="
URL5
" target="_blank">
<img src="
URL5
" width="100"></a></p>
<p style="font-size: 10pt;
font-weight: bold; color: red">
Click any picture to enlarge
</p>
</td>
</tr>
</table>
Template 10.5. Section Headings
This is one of my favorite templates. It incorporates a single-column design for the title and description area, and a two-column design for the terms of service. Each major section features a heading with white text against a teal backgroundalthough you can change the color, of course.
Template 10.5 is based on a simple two-column grid. Several of the rows span two
columns
(thanks to the
colspan="2"
attribute), but the underlying two-column grid is clearly visible in any case. This template allows for two click-to-enlarge pictures, specified at 250 pixels high each; replace
URL1
and
URL2
with the individual file URLs.
<table width="80%" border="0" align="center"
cellpadding="10" cellspacing="20">
<tr>
<td>
<table border="0" cellpadding="0"
cellspacing="20" width=100%>
<tr>
<td bgcolor="teal" colspan="2">
<p style="font-family: Verdana; font-size: 18pt;
text-align: left; color: white; margin-top: 0;
margin-bottom: 0; margin-left: 5">
<strong>Auction Title</strong><br>
Auction Subtitle
</p>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<a href="
URL1
" target="_blank">
<img src="
URL1
" height="250">
</a>    
<a href="
URL2
" target="_blank">
<img src="
URL2
" height="250">
</a>
</td>
</tr>
<tr>
<td bgcolor="teal" colspan="2">
<p style="font-family: Verdana; font-size: 14pt;
text-align: left; color: white; margin-top: 0;
margin-bottom: 0; margin-left: 5">
Item Details
</p>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-family: Verdana; font-size: 10pt;
text-align: left; color: black">
This is the text for the first paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-family: Verdana; font-size: 10pt;
text-align: left; color: black">
This is the text for the second paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
</td>
</tr>
<tr>
<td bgcolor="teal" width="50%">
<p style="font-family: Verdana; font-size: 14pt;
text-align: left; color: white; margin-top: 0;
margin-bottom: 0; margin-left: 5">
Payment
</p>
</td>
<td bgcolor="teal" width="50%">
<p style="font-family: Verdana; font-size: 14pt;
text-align: left; color: white; margin-top: 0;
margin-bottom: 0; margin-left: 5">
Shipping
</p>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
text-align: left; color: teal; margin-top: 0">
I accept credit cards via PayPal, money orders,
cashier's checks, and personal checks. Personal
checks will delay shipment for ten business days.
</p>
</td>
<td width="50%" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
text-align: left; color: teal; margin-top: 0">
I ship via USPS Priority Mail. Shipping/handling
charge to any location in the continental United
States is .00. Email me for shipping/handling
outside the U.S.
</p>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p style="font-family: Verdana; font-size: 12;
font-weight: bold; text-align: center">
<a href="http://search.ebay.com/ _W0QQsassZ[
USERID
]QQhtZ-1">
Click here to view my other auctions
</a>
</p>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
Template 10.6. Three-Column with Block Sections
This template uses a modified three-column grid, each column sized at 225 pixels. The first column holds two click-to-enlarge photos,
stacked
vertically; the second and third columns are
spanned
to hold the title and descriptive text. Payment, shipping, and returns
info
are presented in three single-column blocks at the bottom of the listing.
What I like about this template is how the TOS info is presented in three horizontal blocks at the bottom of the listing. The blocks are created from table
cells
with a dark red background with wide white borders; the text is white
reversed
against the dark background.
<table width="870" bgcolor="white" cellspacing="20"
cellpadding="2">
<tr>
<td width="225" valign="top">
<p align="left">
<a href="
URL1
" target="_blank">
<img src="
URL1
" width="225">
</a>
</p>
<p align="left">
<a href="
URL2
" target="_blank">
<img src="
URL2
" width="225">
</a>
</p>
</td>
<td valign="top" colspan="2">
<p style="font-size: 24pt; font-family: Arial;
font-weight: bold; color: darkblue; text-align: left">
Auction Title
</p>
<p style="font-size: 14pt; font-family: Arial;
color: blue; text-align: left">
This is the text for your auction's overview paragraph.
This paragraph should be no more than 2-3 sentences
long.
</p>
<p style="font-size: 10pt; font-family: Arial;
text-align: left; text-color: black">
This is the text for the first paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<ul style="font-family: Arial; font-size: 10pt;
color: blue">
<li>Bullet point text</li>
<li>Bullet point text</li>
<li>Bullet point text</li>
<li>Bullet point text</li>
</ul>
<p style="font-size: 10pt; font-family: Arial;
text-align: left; text-color: black">
This is the text for the second paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
</td>
</tr>
<tr>
<td width="225" valign="top" bgcolor="darkblue">
<p style="font-size: 10pt; font-family: Arial;
font-weight: bold; text-align: center; color: white;
margin-bottom: 0; margin-top: 2; margin-left: 2;
margin-right: 2">
Payment
</p>
<p style="font-size: 8pt; font-family: Arial;
text-align: center; color: white; margin-top: 0;
margin-left: 2; margin-right: 2; margin-bottom: 2">
I accept credit cards via PayPal, money orders,
cashier's checks, and personal checks. Personal
checks will delay shipment for ten business days.
</p>
</td>
<td width="225" valign="top" bgcolor="darkblue">
<p style="font-size: 10pt; font-family: Arial;
font-weight: bold; text-align: center; color: white;
margin-bottom: 0; margin-top: 2; margin-left: 2;
margin-right: 2">
Shipping
</p>
<p style="font-size: 8pt; font-family: Arial;
text-align: center; color: white; margin-top: 0;
margin-bottom: 2; margin-left: 2; margin-right: 2">
I ship via USPS Priority Mail. Shipping/handling
charge to any location in the continental United
States is .00. Email me for shipping/handling
outside the U.S.
</p>
</td>
<td width="225" valign="top" bgcolor="darkblue">
<p style="font-size: 10pt; font-family: Arial;
font-weight: bold; text-align: center;
color: white; margin-bottom: 0; margin-top: 2;
margin-left: 2; margin-right: 2">
Returns
</p>
<p style="font-size: 8pt; font-family: Arial;
text-align: center; color: white; margin-top: 0;
margin-bottom: 2; margin-left: 2; margin-right: 2">
All sales are guaranteed for 30 days after receipt.
Please contact me if not satisfied. Buyer is
responsible for return postage.
</p>
</td>
</tr>
<tr>
<td colspan="3">
<p style="font-size: 8pt; font-family: Arial;
font-weight: bold; text-align: center; color: darkred">
<a href="http://search.ebay.com/ _W0QQsassZ[
USERID
]QQhtZ-1">
Click here to view my other auctions
</a>
     
<a href=" http://cgi3.ebay.com/ws/ eBayISAPI.dll?ViewUserPage&userid=
USERID
">
Click here to view my About Me page
</a>
</p>
</td>
</tr>
</table>
Template 10.7. Table Details and Picture Show
Here's a template that's ideal when you're selling items with a lot of important specifications, such as consumer electronics equipment, digital
cameras
, and clothing. The
specs
are presented in tabular form, for easy scanning by potential buyers.
In addition to the table-within-a-table, this template features a manual-advance picture slideshow. This code is spec'd for four product pictures, but you can edit the code if you have more or fewer photos to display. There's also a "Check out my other auctions" drop-down menu at the bottom; be sure to customize the code with your own auction
names
and
numbers
.
<table style="border-style: ridge; border-width: 5pt;
border-color: cyan; background-color: #CCFFCC"
align="center" width="600" cellpadding="5">
<tr>
<td>
<p style="font-family: Verdana; font-size: 24pt;
font-weight: bold; text-align: center; color: teal">
Auction Title
</p>
<p style="font-family: Verdana; font-size: 18pt;
text-align: center; color: teal">
Auction Subtitle
</p>
<!--BEGINNING OF SLIDESHOW CODE-->
<script language="JavaScript">
<!--start
var x = 0;
function rotate(num){
x=num%document.slideForm.slide.length;
if(x<0){x=document.slideForm.slide.length-1};
document.images.show.src= document.slideForm.slide.options[x].value;
document.slideForm.slide.selectedIndex=x;
}
function apRotate() {
if(document.slideForm.slidebutton.value == "Stop"){
rotate(++x);window.setTimeout("apRotate()", 5000);}
}
//end -->
</script>
<form name="slideForm">
<table cellspacing=1 cellpadding=4
style="border: 1px teal solid; border-collapse: collapse"
align="center">
<tr>
<td align="center">
<strong><font face="Verdana" size="3" color="teal">
Product Photos
</font></strong>
</td>
</tr>
<tr>
<td align=center width=400 height=400>
<img src="
URL1
" name="show">
</td>
</tr>
<tr>
<td align=center style="border:1px teal solid;">
<select name="slide" onChange="rotate(this.selectedIndex);">
<option value="
URL1
" selected>Photo 1
<option value="
URL2
">Photo 2
<option value="
URL3
">Photo 3
<option value="
URL4
">Photo 4
</select>
</td>
</tr>
<tr>
<td align=center style="border:1px teal solid;">
<input type=button onclick="rotate(0);"
value="ll<<" title="Jump to beginning"
style="border:1px black solid;">
<input type=button onclick="rotate(x-1);"
value="<<" title="Last Picture"
style="border:1px black solid;">
<input type=button name="slidebutton"
onClick="this.value= ((this.value=='Stop')?'Start':'Stop');apRotate();"
value="Start" title="Autoplay" style="width:75px;
border:1px black solid;">
<input type=button onclick="rotate(x+1);" value=">>"
title="Next Picture" style="border:1px black solid;">
<input type=button
onclick="rotate(this.form.slide.length-1);"
value=">>ll"
title="Jump to end" style="border:1px black solid;">
</td>
</tr>
</table>
</form>
<!--END OF SLIDESHOW CODE-->
<p style="font-family: Verdana; font-size: 12pt;
color: black; text-align: left">
This is the text for the first paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<p style="font-family: Verdana; font-size: 12pt;
color: black; text-align: left">
This is the text for the second paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<table width="75%" bordercolor="CCFFCC"
cellspacing="5" cellpadding="5" align="center">
<tr>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left; font-weight: bold">
Manufacturer
</p>
</td>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left">
Panasonic
</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left; font-weight: bold">
Model number
</p>
</td>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left">
SA400X
</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left; font-weight: bold">
Dimensions
</p>
</td>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left">
12" x 6" x 18"
</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left; font-weight: bold">
Weight
</p>
</td>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left">
12.5 lbs.
</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left; font-weight: bold">
Model year
</p>
</td>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left">
2003
</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left; font-weight: bold">
Accessories
</p>
</td>
<td width="50%" bgcolor="teal" valign="top">
<p style="font-family: Verdana; font-size: 10pt;
color: white; text-align: left">
Remote control, connection cable, infrared receiver,
instruction booklet, software CD
</p>
</td>
</tr>
</table>
<p style="font-family: Verdana; font-size: 10pt;
color: teal; text-align: center; margin-left: 150;
margin-right: 150">
<span style="font-weight: bold">Terms of Sale</span>
<br>
Sold as-is. Shipment via USPS Media Mail. I accept
PayPal, cashier's check, money order, or personal check.
</p>
<center>
<p style="font-family: Verdana; font-size: 10pt;
font-weight: bold; color: black">
Check out my other auctions!
</p>
<form>
<select name="URL"
onChange="if(options[selectedIndex].value)
window.location.href=
(options[selectedIndex].value)">
<OPTION value="">My Other Auctions</OPTION>
<OPTION value=http://cgi.ebay.com/ws/ eBayISAPI.dll?ViewItem&item=
ITEMNUMBER1
>
Auction name
</OPTION>
<OPTION value=http://cgi.ebay.com/ws/ eBayISAPI.dll?ViewItem&item=
ITEMNUMBER2
>
Auction name
</OPTION>
<OPTION value=http://cgi.ebay.com/ws/ eBayISAPI.dll?ViewItem&item=
ITEMNUMBER3
>
Auction name
</OPTION>
<OPTION value=http://cgi.ebay.com/ws/ eBayISAPI.dll?ViewItem&item=
ITEMNUMBER4
>
Auction name
</OPTION>
</select>
<noscript>
<input type=submit value="Go">
</noscript>
</input>
</form>
</center>
</td>
</tr>
</table>
Template 10.8. Scrolling Pictures and Text
This is one scrolling, scrolling, scrolling template. We start with the item overview in a scrolling text marquee, and then continue with a scrolling slideshow of product photos. It makes for a very dynamic item listing!
The raised border effect for this template is created with nested tables; the outside table has an outset border, while the inside table has an inset border. The slideshow is set for four pictures, although you can add more. Remember to replace
URL1
,
URL2
, and so on with the full URLs of your image files.
Note
The code for the scrolling slideshow only works for photos stored on an external server on the Internet. If you try to use it with picture files stored on your hard disk, the photos will not display.
[View full width]
[View full width]
<table width="75%" bgcolor="purple" cellpadding="10"
style="border-style: outset; border-width: 5px"
align="center">
<tr>
<td>
<table width="100%" bgcolor="#FFFF99" cellpadding="10"
style="border-style: inset;
border-width: 5px" align="center">
<tr>
<td>
<h1 style="color: purple; font-family: Arial;
text-align: center">
Auction Title
</h1>
<center>
<marquee behavior="scroll" width="50%">
<p style="font-family: Arial; font-weight: bold;
font-size: 14pt; color: white">
<span style="background-color: purple">
This is the overview text for the scrolling marquee.
Keep it short, no more than two sentences.
</span>
</p>
</marquee>
</center>
<p style="font-family: Arial; font-size: 12pt;
text-align: left">
This is the text for the first paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<p style="font-family: Arial; font-size: 12pt;
text-align: left">
This is the text for the second paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<!--BEGINNING OF SLIDESHOW CODE-->
<script language="JavaScript1.2">
var scrollerwidth='300px'
var scrollerheight='300px'
var scrollerbgcolor='white'
var pausebetweenimages=3000
var slideimages=new Array()
slideimages[0]='<img src="
URL1
" border=0">'
slideimages[1]='<img src="
URL2
" border=0">'
slideimages[2]='<img src="
URL3
" border=0">'
slideimages[3]='<img src="
URL4
" border=0">'
var ie=document.all
var dom=document.getElementById
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)", pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.left=parseInt(scrollerwidth)+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)", pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.left=parseInt(scrollerwidth)+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.left)>0&&parseInt (tdiv.style.left)<=5){
tdiv.style.left=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(scrollerdiv2)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.left=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.left)>0&&parseInt (tdiv2.style.left)<=5){
tdiv2.style.left=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(scrollerdiv1)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
setTimeout("move4(scrollerdiv2)",50)
}
else{
tdiv2.style.left=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (iedom){
scrollerdiv1=ie? first2 : document.getElementById("first2")
scrollerdiv2=ie? second2 : document.getElementById ("second2")
move3(scrollerdiv1)
scrollerdiv2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=parseInt(scrollerwidth)+5
document.main.document.second.visibility='show'
}
}
window.onload=startscroll
</script>
<div align="center">
<script language="JavaScript1.2">
if (iedom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+'; height
:'+scrollerheight+';overflow:hidden; background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute; width:'+scrollerwidth+';height:
'+scrollerheight+'; clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0); left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute; width:'+scrollerwidth+';left:
1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute; width:'+scrollerwidth+';left
:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>
</div>
<!--END OF SLIDESHOW CODE-->
<p style="font-family: Arial; font-size: 12pt;
font-weight: bold; text-align: center;
color: purple; margin-bottom: 0">
Terms of Sale
</p>
<p style="font-family: Arial; font-size: 10pt;
text-align: left; color: black; margin-top: 0">
I accept credit cards via PayPal, cashier's checks,
money orders, and personal checks. (Personal checks
will delay shipment for ten working days.) Will ship
via USPS Priority Mail. Actual shipping charges
calculated at end of auction. Insurance optional, extra.
</p>
<p style="font-family: Arial; font-size: 12pt;
font-weight: bold; text-align: center">
<a href="http://search.ebay.com/_W0QQsassZ[
USERID
]QQhtZ-1">
Click here to view my other auctions
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Template 10.9. Image Border
What makes this template unique is that it puts an image border around the entire listing. The border is actually made up of four separate images, one each for the top, bottom, left, and right sides.
The border images are
enclosed
within individual table cells. This requires the creation of a table with three rows and three columns, with the left and right columns sized to fit the thin border images. The top and bottom cells span all three columns, since the top and bottom images are sized to the full listing width (600 pixels). This template also features two click-to-enlarge pictures, displayed in-line with the description text. You should upload the
roundtop.jpg, roundleft.jpg, roundright.jpg
, and
roundbottom.jpg
files to your picture host, and insert the appropriate URLs into the code.
<table cellpadding="0" cellspacing="0" width="600"
bgcolor="white" align="center">
<tr>
<td colspan="3">
<img src="roundtop.jpg">
</td>
</tr>
<tr>
<td align="left" width="19" background="roundleft.jpg"
width="20">
</td>
<td valign="top" width="560" cellpadding="10">
<h1 style="font-family: Times Roman; color: teal;
text-align: left">
Auction Title
</h1>
<p style="font-family: Times Roman; text-align: left">
<a href="
URL1
" target="_blank">
<img src="
URL1
" align="right" hspace="5" vspace="5"
width="100; margin: 10">
</a>
This is the text for the first paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<p style="font-family: Times Roman; text-align: left">
<a href="
URL2
" target="_blank">
<img src="
URL2
" align="left" hspace="5" vspace="5"
width="100">
</a>
This is the text for the second paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<p style="font-family: Arial; font-size: 10pt;
text-align: left; font-weight: bold; color: teal;
margin-bottom: 0px">
Terms of Sale
</p>
<p style="font-family: Arial; font-size: 10pt;
text-align: left; margin-top: 0 px; color: teal">
I accept credit cards via PayPal, cashier's checks,
money orders, and personal checks. (Personal checks
will delay shipment for ten working days.) Will
ship via USPS Priority Mail. Actual shipping
charges calculated at end of auction. Insurance
optional, extra.
</p>
<p style="font-family: Arial; font-weight: bold;
margin-bottom: 0px">
<a href="http://search.ebay.com/ _W0QQsassZ[
USERID
]QQhtZ-1">
Click here to view my other auctions
</a>
</p>
</td>
<td align="left" width="21" background="roundright.jpg"
width="20">
</td>
</tr>
<tr>
<td colspan="3">
<img src="roundbottom.jpg">
</td>
</tr>
</table>
Template 10.10. Friendly Pictures and Fonts
Our final template is a little different from the others in this chapter, in that it's designed to
convey
a homey, quite personal touch. To that end, the pictures are big and friendly, and the font (Comic Sans MS) is also a bit less professional than in the other templates. When you want to let your buyers know that you're a "small guy," just like them, this is the template to use.
By this point, there should be nothing new or startling about what we're doing here. The double border is created by nested tables, using the
dotted
border style, in two different colors. There's a scrolling marquee at the top, and everything else in the template is designed to be as homey and friendly as possible.
<table width="75%" style="border-style: dotted;
border-width: 10; border-color: red" align="center">
<tr>
<td>
<table width="100%" cellpadding="20"
style="border-style: dotted; border-width: 10;
border-color: blue">
<tr>
<td>
<center>
<marquee behavior="scroll" width="50%">
<p style="font-family: Comic Sans MS; font-weight: bold;
font-size: 14pt; color: white">
<span style="background-color: red">
Insert your own personal tag line or slogan here
</span>
</p>
</marquee>
</center>
<center>
<img src="
URL1
" style="border-style: double;
border-color: red; border-width: 3;
margin-top: 10">
</center>
<h1 style="font-family: Comic Sans MS; color: blue;
text-align: center">
Auction Title
</h1>
<p style="font-family: Comic Sans MS;
text-align: justified">
This is the text for the first paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<center>
<img src="
URL2
" style="border-style: double;
border-color: red; border-width: 3; margin-top: 10">
</center>
<p style="font-family: Comic Sans MS;
text-align: justified">
This is the text for the second paragraph of the item
description. The text can be as long as you like,
although 4-5 sentences is probably long enough. You
don't want to make this paragraph too long for
potential buyers to read. Include all the details
you need, but no more than necessary.
</p>
<p style="font-family: Comic Sans MS; font-weight: bold;
text-align: center">
<a href="http://search.ebay.com/_W0QQsassZ[
USERID
]QQhtZ-1">
Click here to view my other eBay auctions
</a>
</p>
<p style="font-family: Comic Sans MS; color: blue;
text-align: center; margin-left: 150;
margin-right: 150; border-style: double;
border-width: 3; padding: 5">
<span style="font-weight: bold; color: red">
Payment and Shipping Info
</span><br>
I accept credit cards via PayPal, cashier's checks, money
orders, and personal checks. (Personal checks will delay
shipment for ten working days.) Will ship via USPS
Priority Mail. Actual shipping charges calculated at
end of auction. Insurance optional, extra.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
