Hello ,
i have a product with some colors details. Eg: http://accommodationinbrasov.com/detail.asp?id=23# when i click a color for that product i will like the value of select (frame) to change to that color. anybody could get me on the right way?
Thank you
You could probably store a list of colors in an array first.
Then, you can bind a change() handler for the select options, like this:
HTML:
<select id="products">
<option value="0">Blue</option>
<option value="1">Black</option>
<option value="2">Red</option>
</select>
If you have an associative array, then you could replace the numbers by keys.
Then in JavaScript, you could do this:
$('#products').change(function() {
$("option:selected", $(this)).each(function() {
var index = $(this).val();
$(this).css('backgroundColor', colorList[index]);
});
})
where colorList is the array of colors.
Basically you need to have all color variations of that frame i.e. image of brown, red, white etc. frames as images.
For example your images could be named like: /images/frame_1_brown.jpg /images/frame_1_red.jpg /images/frame_1_white.jpg
On the select you have something like this:
<select name="color">
<option value="/images/frame_1_brown.jpg" selected="selected">Brown</option>
<option value="/images/frame_1_red.jpg">Red</option>
<option value="/images/frame_1_white.jpg">White</option>
</select>
You have an image tag like:
<img src="/images/frame_1_brown.jpg" alt="Glasses" id="product-image"/>
Then the javascript will look like:
$('select[name=color]').change(function(){
$('#product-image').attr('src', $(this).val());
})
Assuming that you use jQuery of course.
Basically this will change the image's src attribute when you change the selection of the dropdown.
Found it
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
font-size: 12px;
}
a, a:link,a:hover, a:active, a:visited{
text-decoration: none;
color:#000;
}
a:hover{
text-transform: capitalize;
}
div{
padding-right: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div style="float:left;">
<a id="one" href="#" class="clickable"><img src="" alt="one" border="0" /></a>
</div>
<div style="float:left;">
<a id="two" href="#" class="clickable"><img src="" alt="two" border="0" /></a>
</div>
<div style="float:left;">
<a id="three" href="#" class="clickable"><img src="" alt="three" border="" /></a>
</div>
<div style="clear:left;"></div>
<div>
<select id="dropdown">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.clickable').click(function(){
val = $(this).attr("id");
$("#dropdown").val(val);
});
});
</script>