X-Cart forums - Basic color swaping swatches

Ok,

I get several requests on how to do the swapping as found on this page
http://www.aerostich.com/product.php?productid=16376&cat=248&page=1

It's pretty simple, so I'll spell it out. You will need to have a little understanding of HTML to implement this.

First you need to create images that are exactly alike except for color. In my case I created blue, black, red, grey, yellow. Then name them accordingly, DarienBlue.jpg, DarienBlack.jpg.... Put these images somewhere on your server e.g. /files/images/suits

Keep the order of your colors consistent

Second, you need to create the javascript and include it in the page. Add the following into /skin1/customer/common.js

Code:

// Code for the Darien to switch colors

// Selects the proper color in the drop down color menu

function ChangeDarienColor(id,newValue) {

        var colorCodes = new Array("Blue","Black","Red","Gray","Viz","Silver");

// Change the correct drop down menu

        if(id!=""){

                document.getElementById(id).selectedIndex = newValue;

        }        

// Change the image

        var ImageName = "Darien"+colorCodes[newValue]+".jpg";        

        document.getElementById("ColorfulSuitD").src = "/files/images/suits/"+ImageName;        

}

right before the

Code:

-->

The basic HTML looks like this. You will have to ediit it for two things. 1. the colors. 2. the id of your selection (notice that clicking the swatch changes the drop down selection as well.).

Code:

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td valign="top">

Standard Colors (click to view)




<table>

<tr>



<td>

<table style="border: 1px solid #FFFFFF;" cellpadding="2" onmouseover="javascript:this.style.borderColor = '#2E2930';" onmouseout="javascript:this.style.borderColor = '#FFFFFF';">

<tr>

<td width="20" style="background-color: blue;" onClick="ChangeDarienColor('po81','0')">

</td>

</tr>

</table>

</td>

<td>

<table style="border: 1px solid #FFFFFF;" cellpadding="2" onmouseover="javascript:this.style.borderColor = '#2E2930';" onmouseout="javascript:this.style.borderColor = '#FFFFFF';">

<tr>

<td width="20" style="background-color: black;" onClick="ChangeDarienColor('po81','1')">

</td>

</tr>

</table>        

</td>

<td>

<table style="border: 1px solid #FFFFFF;" cellpadding="2" onmouseover="javascript:this.style.borderColor = '#2E2930';" onmouseout="javascript:this.style.borderColor = '#FFFFFF';">

<tr>



<td width="20" style="background-color: red;" onClick="ChangeDarienColor('po81','2')">

</td>

</tr>

</table>

</td>        

<td>

<table style="border: 1px solid #FFFFFF;" cellpadding="2" onmouseover="javascript:this.style.borderColor = '#2E2930';" onmouseout="javascript:this.style.borderColor = '#FFFFFF';">

<tr>

<td width="20" style="background-color: gray;" onClick="ChangeDarienColor('po81','3')">

</td>

</tr>

</table>

</td>

<td>

<table style="border: 1px solid #FFFFFF;" cellpadding="2" onmouseover="javascript:this.style.borderColor = '#2E2930';" onmouseout="javascript:this.style.borderColor = '#FFFFFF';">

<tr>

<td width="20" style="background-color: #ebe805;" onClick="ChangeDarienColor('po81','4')">

</td>

</tr>

</table>



</td>

</tr>

</table>

</td>

<td valign="top">[img]/files/images/suits/DarienBlue.jpg[/img]</td>        

</tr>

</table>

In my case, the ID of the selection is "po81".

That's basically it in a nutshell. There is another more complex form of this for a different product we sell, but that includes the use of hidden form elements to keep track fo selected colors. It 's for this product.
http://www.aerostich.com/product.php?productid=16133&cat=248&page=1

But that is more complex and I won't explain it here.

If you have questions just ask them here, I or someone else may be able to point you in the right direction, but before you dive head long into Javascript, CSS, and HTML, it's best to arm yourself with some knowledge about it. Have fun.