Member Avatar for jyotiu

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.

  • 3 Contributors
  • 4 Replies
  • 132 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by nickfday
Member Avatar for essential

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"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<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%; }
/* ]]> */
</style>

<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 + '!'; }
}
/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="tube">
<table summary="Changing the images using colours">
<caption>JavaScript Demo:</caption>
<tr>
<th title="Current Image" colspan="4">
<img src="bag.jpg" id="imageSample" alt="Available In Color Red" width="200" height="300" /></th>
</tr>
<tr>

<!-- 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>
</tr>
</table>

</div> <!-- tube -->
</div> <!-- #content -->
</div> <!-- #wrapper -->
</body>
</html>
Member Avatar for jyotiu

Thanks a Lot "essential" .....

You made my life !!!!

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

Member Avatar for nickfday

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

Member Avatar for nickfday

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?

Thanks

Nick

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.