Welcome to Zoicks.Com
The Home of Lesley's Website Designs

Welcome to my Multiple Images in eBay Auctions Help Page

A special thanks goes to everyone's favorite Photos/HTML expert, Bob Bull (Bobal), who originally posted these helpful tips.

Here are several options you can use to post multiple pictures in your eBay auctions. I have either included the code immediately under each example or included a link to the URL where you can copy/paste the code.

Place all of your images in one block with clickable buttons

Pictures Of Cats And Dogs

Here is the code for you to copy/paste:

<center>
<SCRIPT LANGUAGE="JavaScript">
//Declare an array
var CachedImages
CachedImages = new Array(8)
//Fill the array with images
CachedImages[0] = new Image
CachedImages[0]="http://www.zoicks.com/spots1.jpg"
CachedImages[1] = new Image
CachedImages[1]="http://www.zoicks.com/spots2.jpg"
CachedImages[2] = new Image
CachedImages[2]="http://www.zoicks.com/spots3.jpg"
CachedImages[3] = new Image
CachedImages[3]="http://www.zoicks.com/spots4.jpg"
CachedImages[4] = new Image
CachedImages[4]="http://www.zoicks.com/spots5.jpg"
CachedImages[5] = new Image
CachedImages[5]="http://www.zoicks.com/twokitties.jpg"
CachedImages[6] = new Image
CachedImages[6]="http://www.zoicks.com/persiankitty.jpg"
CachedImages[7] = new Image
CachedImages[7]="http://www.zoicks.com/justmarried.jpg"
function ChangeImage(n)
{
document.SpaceImage.src=CachedImages[n]
}

</SCRIPT>
<H1><font color=#793F57>Pictures Of Cats And Dogs</H1></font>
<IMG SRC="http://www.zoicks.com/pinkkitty.jpg" NAME="SpaceImage">
</CENTER>
<P>
<FORM NAME="ImageSelector">
<CENTER>
<INPUT TYPE="BUTTON" VALUE="Picture 1" onClick="ChangeImage(0)">
<INPUT TYPE="BUTTON" VALUE="Picture 2" onClick="ChangeImage(1)">
<INPUT TYPE="BUTTON" VALUE="Picture 3" onClick="ChangeImage(2)">
<INPUT TYPE="BUTTON" VALUE="Picture 4" onClick="ChangeImage(3)"><br>
<INPUT TYPE="BUTTON" VALUE="Picture 5" onClick="ChangeImage(4)">
<INPUT TYPE="BUTTON" VALUE="Picture 6" onClick="ChangeImage(5)">
<INPUT TYPE="BUTTON" VALUE="Picture 7" onClick="ChangeImage(6)">
<INPUT TYPE="BUTTON" VALUE="Picture 8" onClick="ChangeImage(7)">
</CENTER>
</FORM>

This code requires that you have a large image and a thumbnail image for each of your pics. In this example I created 75 pixel wide thumbnails and named each file with a 'tn' after the original file name to help distinguish it from the large pic.

Click On Thumbnails To Enlarge

Here is the code for you to copy/paste:

<TABLE ALIGN=CENTER CELLSPACING="20" height="500"><TR><TD>
<CENTER>
<img src=http://www.zoicks.com/donut2.jpg height=400 alt name="the_pic"><BR>

<a href="#"; onClick="document.the_pic.src='http://www.zoicks.com/donut2.jpg';return false;">
<img src=http://www.zoicks.com/donut2tn.jpg border=0 alt="Sprinkles"></a>

<a href="#"; onClick="document.the_pic.src='http://www.zoicks.com/donut202.jpg';return false;">
<img src=http://www.zoicks.com/donut202tn.jpg border=0 alt="Jelly"></a>

<a href="#"; onClick="document.the_pic.src='http://www.zoicks.com/donut24.jpg';return false;">
<img src=http://www.zoicks.com/donut24tn.jpg border=0 alt="Jelly Filled"></a>

<a href="#"; onClick="document.the_pic.src='http://www.zoicks.com/donut29.jpg';return false;">
<img src=http://www.zoicks.com/donut29tn.jpg border=0 alt="Cinnamon Raisin"></a>

<a href="#"; onClick="document.the_pic.src='http://www.zoicks.com/donut6.jpg';return false;">
<img src=http://www.zoicks.com/donut6tn.jpg border=0 alt="Creme Filled"></a>

<a href="#"; onClick="document.the_pic.src='http://www.zoicks.com/donut25.jpg';return false;">
<img src=http://www.zoicks.com/donut25tn.jpg width=75 border=0 alt="Crullers"></a>
</CENTER>
<CENTER><font font face="Verdana" color="#793F57" size=2><b><heavy>Click On Thumbnails To Enlarge</CENTER></heavy></b></font></TD></TR></TABLE>

This slide show enables you to include a caption under each of your images. The pic rotation time delay is adjustable.

To be able to include this slideshow in an eBay auction, you will need to find the <ilayer> tag toward the bottom of the code and remove everything between and including the <ilayer> and </ilayer> tags.

You can find the code for this FlexiSlide at Dynamic Drive:
http://www.dynamicdrive.com/dynamicindex14/flexislide.htm

This slide show enables you to advance the images manually or automatically. The automatic time delay is adjustable.

Vintage Tin Reproduction Wind-Up Toy

View 1 of 9VIew 2 of 9View 3 of 9View 4 of 9View 5 of 9View 6 of 9View 7 of 9View 8 of 9View 9 of 9

You can find the code for this slideshow generator at ricocheting.com:
http://www.ricocheting.com/js/slide.html