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.


SprinklesJellyJelly Filled Cinnamon RaisinCreme FilledCrullers

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

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

eMail Me