View source for Changing additional pictures display on mouse over

First of all add a new ConLib control, for example i say it '''CustomProductSwatches'''. Then add it to my Product Page scriptlet '''ShowProduct1''' in the following way

<code>
<pre>
#if($Product.Images.Count > 0)
<td style="border-top:solid 1px gray; border-right:solid 1px gray; padding:5px;">
[[ConLib:CustomProductSwatches]]
#else
<td style="border-top:none; border-right:solid 1px gray; padding:0px;">
#end
</pre>
</code>

The control's files will be as bellow

<code>
<pre>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CustomProductSwatches.ascx.cs" Inherits="ConLib_CustomProductSwatches" %>
<script type="text/javascript">
    function changeImage(urlpath)
    {
        t = urlpath.length;
        urlpath = urlpath.substr(2,t-2);
        document.getElementById("ProductImage").src = urlpath;
    }
</script>
<ajax:UpdatePanel ID="DescriptionAjax" runat="server">
    <ContentTemplate>
        <div>
            <asp:Repeater runat="server" ID="ImageList">
                <ItemTemplate>
                    <span onmouseover="changeImage('<%# Eval("ImagePath") %>');"> 
                    <asp:Image runat="server" ID="DisplayImage" ImageUrl='<%# Eval("ImagePath") %>' Width="50" Height="50" BorderWidth="0" />
                    </span>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </ContentTemplate>
</ajax:UpdatePanel>
</pre>
</code>

<code>
<pre>
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using CommerceBuilder.Products;
using CommerceBuilder.Utility;

public partial class ConLib_CustomProductSwatches : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ImagePath", typeof(String));
        int _ProductId = AlwaysConvert.ToInt(Request.QueryString["ProductId"]);
        Product _Product = ProductDataSource.Load(_ProductId);
        if (_Product != null)
        {
            ProductImageCollection images = _Product.Images;
            dt.Rows.Add(new Object[] { AlwaysConvert.ToString(_Product.ImageUrl) });
            foreach (ProductImage theimage in images)
            {
                dt.Rows.Add(new Object[] { AlwaysConvert.ToString(theimage.ImageUrl) });
            }
            ImageList.DataSource = dt;
            ImageList.DataBind();
        }
    }
}
</pre>
</code>

and you are done with your new conlib control which will change and display the product images on mouse over.