Hola, buenas tardes. Tengo este sistema de cotización que encontré en internet:
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:
(http://i.imgur.com/WHnKVeo.png)
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:
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'){
}
}
Pero no se como hacer para aplicarlo ahora con colores y hacer que vaya cambiando la imagen...
Un saludo !!.
Hola, te doy una idea básica de cómo se haría con JQuery:
HTML imagen:
<img id='foto' src='default.jpg'>
Supongamos que las fotos de las alfombras en varios colores se llaman asi:
alfombra1_negra.jpg
alfombra1_roja.jpg
etc.
HTML select:
<select id="estilo">
<option value='negra'>Negro</option>
<option value='roja'>Rojo</option>
</select>
JS:
$('#estilo').on('change', function() {
var value = $(this).val();
$('#foto').attr('src', 'alfombra1_' + value + '.jpg');
});
Espero que te dé una idea de cómo adaptarlo a tus necesidades.
Saludos!
Hola, gracias por responder. El problema es que son varios los productos que se seleccionan, y se tiene que hacer para cada uno de pendiendo cuál está seleccionado, este es: https://pastebin.com/kSJb4W76
cómo podría aplicarlo con distintos productos?
Intenté hacerlo, quedó así:
https://pastebin.com/MgzWEi45
Pero me marca error en la línea 48, alguna sugerencia?
Exactamente esto quiero: https://jsfiddle.net/3bL3y03g/2/
Quiero juntarlo a este: https://pastebin.com/q1CLJQfp que vendría siendo este: http://cotizadorweb.com.mx/ para cuando se elija un producto aparezca debajo de su imagen el color, pero no puedo juntarlos..
Mod: No hacer triple post. Existe el boton "Modificar"
linea 46
<?php <img src="http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img-mushroom.jpg" class="imagen">no existe <img dentro de php
no se si te sirve, no leí casi el tema...
mi recomendación.... llama js directamente con los valores
<div class="rojo" onclick="cambiar_imagen('/imagen_para_color_rojo.jpg');" >color rojo</div> y en js
cambiar_imagen(src){
$("#muestra").attr("src",src);
}requiere más código en php, pero el código es más simple
El js lo debo incluir ahí mismo debajo del la imagen del color rojo? O como son varios productos debe ser después de cada"if($('.producto'')=='producto') "?