Hi All,

I am displaying an image from database using php .... the problem is that i want to give a row of colors beneath the image .... so that when a user clicks on one of the color .... the image should change accordingly ... in my case i am displaying a shopping bag and i want to give a row beaneath as available colors ..... so that when a user clicks on a color the image should change without refreshing .....

I ve no idea what is this functionality or whether it is already there in the open.

Please help me out.

Thanks a million in advance.

8 Years
Discussion Span
Last Post by nickfday

Try this one:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#internal-style" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Change The Image With Colours</title>
<style id="internal-style" type="text/css" media="all">
/* <![CDATA[ */
html, body, div {
     border: 0;
     font: normal 10pt/120% Verdana, Arial, sans-serif; }   

html {
     min-width: 800px;
     width: auto; }

body {
     background-color: #EEE;
     color: #000;
     margin: 1em;
     text-align: center;
     width: auto; }

div {
     margin: 0;
     padding: 0; }

body #wrapper {
     margin: 0 auto;
     width: 100%; }

a {
     text-decoration: none;
     color: inherit; }

div #content {
     background-color: #FFF;
     color: #000;
     float: left;
     min-height: 600px;
     overflow: hidden;
     position: relative;
     width: 100%; }

table img {
     display: block;
     margin: 1em auto 1em auto;
     vertical-align: middle; }
table {
     display: table;
     border: none;
     border-collapse: collapse;
     border-spacing: 1em;
     margin: 0 auto; 
     width: auto; }

caption {
     display: table-caption;
     caption-side: top; 
     text-align: left; }
tr {
     line-height: 150%; }

td {
     text-align: center; }

td[title="Red"] {
     background-color: #F10; 
     color: #FFF; }
td[title="Green"] {
     background-color: #190; 
     color: #FFF; }
td[title="Blue"] {
     background-color: #10F; 
     color: #FFF; }
td[title="Black"] {
     background-color: #000; 
     color: #FFF; }

div .tube {
     float: left;
     left: 6%;
     position: relative;
     text-align: left;
     top: 6%;
     width: 95%; }
/* ]]> */

<script type="text/javascript">
/* <![CDATA[ */

function changeImage(ref) {
var img = (document.all) ? document.all.imageSample :  document.getElementById('imageSample');
var myImage = [];

// Valid path of the any (Red Item) goes here (e.g ./images/redShoes.(jpg/gif/etc.) )

myImage['red'] = new Image();
myImage['red'].src = 'redBag.jpg';

// Same process must be applied as mentioned above.
myImage['green'] = new Image();
myImage['green'].src = 'greenBag.jpg';

myImage['blue'] = new Image();
myImage['blue'].src = 'blueBag.jpg';

myImage['black'] = new Image();
myImage['black'].src = 'blackBag.jpg';

if (document.images && img) {
img.src = myImage[ref].src; img.style.backgroundColor = ref; img.alt = 'Available in color ' + ref + '!'; }
/* ]]> */
<div id="wrapper">
<div id="content">
<div class="tube">
<table summary="Changing the images using colours">
<caption>JavaScript Demo:</caption>
<th title="Current Image" colspan="4">
<img src="bag.jpg" id="imageSample" alt="Available In Color Red" width="200" height="300" /></th>

<!-- Reference for the image replacement must be declared with the changeImage() function. (e.g changeImage('red/green/blue/black') this colors can be extended by declaring additional color (names) with the myImage[array] -->

<td title="Red"><a href="javascript:void(0);" onmouseover="changeImage('red');">Red</a></td>
<td title="Green"><a href="javascript:void(0);" onmouseover="changeImage('green');">Green</a></td>
<td title="Blue"><a href="javascript:void(0);" onmouseover="changeImage('blue');">Blue</a></td>
<td title="Black"><a href="javascript:void(0);" onmouseover="changeImage('black');">Black</a></td>

</div> <!-- tube -->
</div> <!-- #content -->
</div> <!-- #wrapper -->

Thanks a Lot "essential" .....

You made my life !!!!

God Bless You ........................................


Great script, learned a lot from it. Is there anyway of displaying small movie files instead of images? Replacing the url with a .mov extension didnt work for me


animated gifs were sufficient for what I'm doing so I'm using that.

what would be great is if the images were variables of an sql database. So instead of

line 118. myImage.src = 'blackBag.jpg';

would be something like:
myImage.src= <?php echo" $row[1] . " ; ?>

anyone know of making that compile with this script?



This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.