mad in pursuit: grown-up's guide to streamlining an auction listing, page 2

Back to Page 1

Microsoft FRONT PAGE

Goal: Use own web site to publish pictures and to set up a template for item descriptions. This template will include a more sophisticated "click 'n switch" photo gallery. Descriptions only stay in ebay for 60 days, so you can't count on going back and revising one of your old descriptions for a similar item.

...Photo page. First, get the photos out to the web. They must be referred to by their full published URLs (i.e., "http://www... etc.").

OPTIONAL (if you aren't confident of getting the correct URL of the published photo): Create a new page with a 1-column table. Insert large and small pictures for the item. Save. Add a hyperlink to this page (I hide it on the bottom of my homepage) so you can find it later. Publish. Open the photo page in your browser.

...Description page. Here you are really just creating the HTML than can be copied to the eBay description. FrontPage lets you use the WYSIWYG interface to generate and test your code easily. One description page can then be used as an ongoing template. Structure: (1) Area for text description; (2) Table for photos.

...Table for photos. Create 3-cell vertical table. Insert 1st photo in top cell. In the second cell, type "Click on thumbnails to enlarge:" In the third cell (to keep things neat) insert a horizontal table to accommodate all your small photos (including the main one in the top cell). These are what will be clicked upon to enlarge.

interactive  photo gallery...Insert photos. First time around it might be easier to drag in the photos from your own files for positioning. But then the photo sources must be changed to the full URLs in the published photos. Go to your open Photo Page. In Internet Explorer, right click on photo and chose Properties. In the Properties window, highlight the full name of the picture and copy (CTL-C). Go back to FrontPage. Right-click on the corresponding photo and choose Picture Properties. Under General tab, replace Picture location with full URL (Edit > Paste or CTL-V).

...Add javascript. Okay, here's the tricky part, which turns out to be not so tricky, thanks to eBay Hacks. The "code" view of your table should look like the HTML below (minus the red type). Now, just add a little javascript, so that when you click on a small picture, it changes out with the large picture.

(1) Add name="view" to the line containing your main image in the top cell.

(2) For each thumbnail, add the onClick line. The source (src) must be the full URL to the large version of the thumbnail.

<table border="0" width="75%">
<tr>
<td>
<img border="0" src="http://www.madinpursuit.com/ebay/AquaCam/Aqua-Cam-front.jpg" width="600" height="600" name="view"></td>
</tr>
<tr>
<td>Click on thumbnails to enlarge:</td>
</tr>
<tr>
<td>
<table border="0" width="100%" cellpadding="5">
<tr>
<td>

<img border="2" src="http://www.madinpursuit.com/ebay/AquaCam/Aqua-Cam-front-SM.jpg" width="150" height="150"
onClick="document.images['view'].src='http://www.madinpursuit.com/ebay/AquaCam/Aqua-Cam-front.jpg';" align="left" hspace="0"></td>
<td>

<img border="2" src="http://www.madinpursuit.com/ebay/AquaCam/Aqua-Cam-above-open-SM.jpg" width="150" height="150"
onClick="document.images['view'].src='http://www.madinpursuit.com/ebay/AquaCam/Aqua-Cam-above-open.jpg';" align="left"></td>
<td>

<img border="2" src="http://www.madinpursuit.com/ebay/AquaCam/Aqua-Cam-rear-above-SM.jpg" width="150" height="150"
onClick="document.images['view'].src='http://www.madinpursuit.com/ebay/AquaCam/Aqua-Cam-rear-above.jpg';" align="left"></td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
 

Check it out in the Preview window. Once you get a page with this code nailed down, use it as a template -- just paste in the URLs of the new pictures.

...Item description. If you haven't done it already, write the full description of item in the Design view.

eBAY

...Description. Start the process of selling your item. At the description, go back to your Description Page in FrontPage. Go to the Code view. Select all all the HTML text between (but not including) <BODY> tags. CTL-C to copy. Back in eBay, paste (CTL-V) it into the description box. Your description will now contain both an attractive HTML-rich description and an interactive photo gallery.

...Photos. When you get to the photo part, no need to enter anything, since your photos are part of the description.

...Thumbnail. If you want your 150 x 150 thumbnail in the gallery, be sure to check the Gallery box, then paste in the URL of a photo that will work well in small format. Don't worry if it's too big, since ebay will size it down.

Back to Page 1

1.27.04 (last updated: 06.20.05)

FIND OUT MORE>>>

Selling on ebay isn't just about organizing your work flow. For someone who sells collectibles, it can be QUITE A JOURNEY.