http://cotizadorweb.com.mx/
Pero me gustaría saber cómo hago para abajo de la imagen del producto aparezcan varios colores (en imagen) y cuando se seleccione uno, la imagen de arriba cambie con el color seleccionado:
Algo así que si pone alfombra y selecciona el color rojo, cambie la imagen con una alfombra roja, y así para el resto, algo como lo que se hace aquí: http://www.persianasfarz.com/producto.php?prodId=16&cate=Enrollable
Supongo que es como esto:
Código:
function sel_estilo(value) //lo que pasa cuando se selecciona un estilo
{
$('#rango').val('').change();
var select=document.getElementById("rango");
var op=select.getElementsByTagName("option");
if(value==''){
for (var i = 1; i < op.length; i++) op[i].style.display="none";
}else if(value=='Trafico'){
for (var i = 1; i < 3; i++) op[i].style.display="block";
for (var i = 3; i < op.length; i++) op[i].style.display="none";
}else if(value=='Residencial'){
$("#msg-pedido").modal({
modal: true,
buttons: {
Ok: function() {
$( this ).modal( "close" );
}
}
});
for (var i = 1; i < 3; i++) op[i].style.display="none";
for (var i = 3; i < 10; i++) op[i].style.display="block";
for (var i = 10; i < op.length; i++) op[i].style.display="none";
}else if(value=='7mm'){
for (var i = 1; i < 12; i++) op[i].style.display="none";
for (var i = 12; i < 14; i++) op[i].style.display="block";
for (var i = 14; i < op.length; i++) op[i].style.display="none";
}else if(value=='8mm'){
for (var i = 1; i < 14; i++) op[i].style.display="none";
for (var i = 14; i < 16; i++) op[i].style.display="block";
for (var i = 16; i < op.length; i++) op[i].style.display="none";
}else if(value=='10mm'){
for (var i = 1; i < 16; i++) op[i].style.display="none";
for (var i = 16; i < 18; i++) op[i].style.display="block";
for (var i = 18; i < op.length; i++) op[i].style.display="none";
}else if(value=='12mm'){
for (var i = 1; i < op.length; i++) op[i].style.display="none"; //??????
}else if(value=='Rollet'){
}else if(value=='Wollet'){
}else if(value=='Panellet'){
}else if(value=='Aluminix'){
}
}
{
$('#rango').val('').change();
var select=document.getElementById("rango");
var op=select.getElementsByTagName("option");
if(value==''){
for (var i = 1; i < op.length; i++) op[i].style.display="none";
}else if(value=='Trafico'){
for (var i = 1; i < 3; i++) op[i].style.display="block";
for (var i = 3; i < op.length; i++) op[i].style.display="none";
}else if(value=='Residencial'){
$("#msg-pedido").modal({
modal: true,
buttons: {
Ok: function() {
$( this ).modal( "close" );
}
}
});
for (var i = 1; i < 3; i++) op[i].style.display="none";
for (var i = 3; i < 10; i++) op[i].style.display="block";
for (var i = 10; i < op.length; i++) op[i].style.display="none";
}else if(value=='7mm'){
for (var i = 1; i < 12; i++) op[i].style.display="none";
for (var i = 12; i < 14; i++) op[i].style.display="block";
for (var i = 14; i < op.length; i++) op[i].style.display="none";
}else if(value=='8mm'){
for (var i = 1; i < 14; i++) op[i].style.display="none";
for (var i = 14; i < 16; i++) op[i].style.display="block";
for (var i = 16; i < op.length; i++) op[i].style.display="none";
}else if(value=='10mm'){
for (var i = 1; i < 16; i++) op[i].style.display="none";
for (var i = 16; i < 18; i++) op[i].style.display="block";
for (var i = 18; i < op.length; i++) op[i].style.display="none";
}else if(value=='12mm'){
for (var i = 1; i < op.length; i++) op[i].style.display="none"; //??????
}else if(value=='Rollet'){
}else if(value=='Wollet'){
}else if(value=='Panellet'){
}else if(value=='Aluminix'){
}
}
Pero no se como hacer para aplicarlo ahora con colores y hacer que vaya cambiando la imagen...
Un saludo !!.