eBay technique: JavaScript thumbnails

Since many CMON'ers sell painted minis on eBay, I would lile to share my technique for embedding your own photo set into your auctions, including thumbnails that can be clicked to change a larger photo.  Since eBay charges per photo that you place in your auction and limits the size of the photos included, this technique is helpful is presenting many detailed photos in an attractive and cost effective manner.Prerequisites:

Image Processing tool (I recommend GIMP, and it's free.)
Photobucket account (again, free.  We will use Photobucket in this tutorial to store the images.)
the ability to copy/paste a url from one place to another
Bravery in the face of simple HTML
an eBay account with which to list auctions (optional, I suppose)This tutorial does not require knowledge of html, but a basic knowledge will help.First off, here is an example of what we are talking about: http://hakosoftware.com/pages/jsthumbs/As you click on each of the thumbnails on the left of the large image, the large image changes to show a larger version of the thumbnail you clicked.  The HTML to create this example page is the exact HTML I use to create auction listings, copied and pasted into the Item Description area.  Part 1: Basic HTML OverviewAgain, you don't need to know HTML to use this technique, but a basic understanding of how HTML tags work will help you make better auction listings.  If this part is too scary, or if you already know HTML, skip on to part 2.HTML (HyperText Markup Language) is made up of tags and text.  Tags are wrappers that tell the browser (Internet Explorer, Safari, Firefox, etc.) how to show the page.Example:  This HTML: This text is <b>bold</b>.  Shows this: This text is bold.The <b> and </b> are the bold tag.  When the browser reads <b> it know it should start showing text in bold, and when it read </b> is knows it should stop showing text in bold.  Most of HTML is in the <tag>something</tag> format.  Some tags do not require ending tags, like the tag to show an image, but most do.(Side note: the <b> tag is outdated but still usable at this point, but it makes a good example of an HTML tag.  The current standard for changing text is to use a <span> tag, with a style attribute in it.  <b>my bold text</b> is now <span style="font-weight:bold">my bold text</span>)In this technique, we will display images using the <img> tag, and then make them do something by adding an "OnClick" attribute to each image.  OnClick does just what it says; when the viewer clicks on the image, do something.  We'll talk more about this in a minute.The <img> tagTo embed an image on a web page, use the <img> tag.  <img> required no closing </img> tag.  The simplest format is this:    <img src="http://coolminiornot.com/CMONlogoblack200607.jpg">When the browser reads this tag, it fetches the image at the address in the "src" attribute and displays the image.Before we go on, here's a preview of what the tags will look like that produces thumbnails that update the larget image when clicked:<img onClick="change_pic('http://i3.photobuecket.com/albums/y57/hakoMike/Warmachine/Mercenaries/Ashlynn%2-dElyse/final4.jpg')" src="http://i3.photobucket.com/albums/y57/hakoMike/Warmachine/Mercenaries/Ashlynn%20dElyse/th_final4.jpg">Now, so you get too freaked out, I'll put it in more simplified terms:<img onClick='change_pic(bigpic_1)' src='thumbnail_1'>[pagebreak]In Part 1 we talked about simple HTML and got a preview of the <img> tag that you will be using.Part 2: The Magical JavaScriptThe whole point of this is to update the large picture, so we'll need something that can act when a thumbnail is clicked to change an image without reloading the whole page (and thus getting eBay freaked out.)  Enter JavaScript.  JavaScript is essentially tiny programs that can be run by your browser, and are included as part of a web page text.  The JavaScript we're using is exceedingly simple, but it gets the job done.Let's look at it now:<script type="text/javascript">function change_pic(url){   document.mainpic.src = url;}</script>So what does it do?  You don't need to know!  All you care is that when you put change_pic(some photo url) into the onClick attribute of an image, clicking on it will update the big photo with the photo at "some photo url."  The only thing we really have to be careful of is the name "mainpic" here.  "Mainpic" is our big picture, and we must name is this when we create it.'Is that it for the JavaScript?  Yes!  Aren't you happy?Part 3: The Image StoreYou have a photobucket account by now, right?  Actually, any image storage will work, from your own webhost to flickr or whatever, but I use photobucket because they auto-thumbnail each image.  Simply put "th_" at the beginning of the image filename and you'll be looking at the thumbnail.  Easy.My photobucket image: http://i3.photobucket.com/albums/y57/hakoMike/Warmachine/Ashlynn%20dElyse/final1.jpgThumbnail of the same images: http://i3.photobucket.com/albums/y57/hakoMike/Warmachine/Ashlynn%20dElyse/th_final1.jpgAs far as the image sizes go, keeping the images a standardized width is important for keeping the page looking nice.  If the image sizes are all very different, clicking on the thumbnails will keep resizing the table they are in (we'll talk about that later) and the page will appear to jump around.  Using the square selection tool to crop the image (as opposed to the rectangular one) can help keep the images nicely proportioned as well.  Once the images are cropped, resample (change the resolution) so that they are all the same number of pixels wide.Once you have all the photos uploaded somewhere where they are web accessible and can get thumbnails, either because you created them manually or a site like photobucket generated them, you are ready to change the actual code to make this thing work.  All you need to know is the URL (the web address) of each photo, like the example above.  On to page 3![pagebreak]Now that we have our photo URL's ready....Part 4: Adding our photos to the templateLet's go back to the example again, located at http://hakosoftware.com/pages/jsthumbs.  View the source of the page, typically by right clicking on the page (somewhere other than on an image) and choosing "View source" or "view page source" or similar.  At this point you may want to copy/paste the source of this page into a text file on your computer, since you will need to make changes to it and copy/paste it into the eBay description.  Looking at the HTML, part of the way down the page you will see the the block labeled "<!-- picture area -->"  This is the part we'll be editing for your thumbnails.  Surrounding the <img> tags that make up the thumbnails is an HTML <table> and the <tr> and <td> tags that go with it.  This <table> is the method I have used to put the thumbnails on the left and the larger image to the right of them, and as long as you leave the <tr> and <td> tags in place, with all the thumbnails inbetween that <td> and </td> tag, you won't have any problems.  If you want to customize, there are many tutorials on HTML tables.  Find one and try it out!Okay, so on to the thumbnails.  You will need one <img> tag for each thumbnail you wish to show.  I recommend doing some copy/paste here, since the everything but the filename at the end of the url will normally be the same for each <img>.  For each thumbnail you have, change the url in the "change_pic(" section to be the url of the large version of the photo, and change the "realrealrealrealrealsrc=" section to be the url of the thumbnail version of the photo. Once all the thumbnails are in <img> tags, you need to change the large picture.  It is another <img> tag located just past the thumbnail <img> tags, in another set of <td></td>.  Change the " src="http://www.coolminiornot.com/ section to be the url of the thumbnail version of the photo. Once all the thumbnails are in <img> tags, you need to change the large picture.  It is another <img> tag located just past the thumbnail <img> tags, in another set of <td></td>.  Change the "scr=" section to be the large version of the photo that is your top thumbnail.  Make sure you leave the name="mainpic" section intact.  That name, mainpic, is used in the JavaScript to identify what image to change, and if the large image isn't called "mainpic" then nothing will change!Once you have edited all the images url's, save the file as an html file (filename.html instead of filename.txt)Part 5: Testing it outOne of the great things about this technique is that you can try it out before you actually make an auction listing.  All web browsers can load a web page from a remote address (like http://coolminiotnot.com) or can load a file off the local computer and view it.  Use the "open file" ability of your browser (typically found in the "File" menu in the upper left of the browser window) to open the html document you just saved.  If the source shows in the browser window, that means you saved the file as text (.TXT typically) and must change it to a .html or .htm file before the browser will display it as a web page ("render it" is what the cool kids say.)Click on each of the thumbnails.  If you put the correct URL's in, each thumbnail should be a good photo, and clicking on each should result in the large photo changing.  If something doesn't work, either a dead image link or the main photo changes to something unexpected or a dead image link, remember that the thumbnails are in the same order as the <img> tags are in the HTML.  If you have a problem with thumbnaul #3 then you problem exists on the third <img> tag.We'll put all this in an auction on the next page.[pagebreak]Page 6: Putting it all in an auctionIf everything worked out in testing, the hard part is over.  You can put this into an auction with ease.  Begin the auction creation process as normal, until you get to the phase where you input the item description.  For this technique to work properly, you must insert the JavaScript function at the top of the description and then copy/paste the section from the phrase <!-- picture area --> until <!-- end picture area --> into the auction description.  Note: the description must be set to use HTML for this to work.  If you are in a WYSIWYG interface, it will not work.Once you have pasted the new "picture area" into your description, previewing the auction will show the thumbnails and the large image, and clicking should work as well.  If they don't work in the preview they won't work in the auction, so test before committing to the listing.Happy auctioning!