Cambiar la imagen de pendiendo la seleccionada

[Antoniio]

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:



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 [Seleccionar] Expandir

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 !!.

[xiruko]

Hola, te doy una idea básica de cómo se haría con JQuery:

HTML imagen:

Código ( html4strict) [Seleccionar] Expandir

<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:

Código ( html4strict) [Seleccionar] Expandir

<select id="estilo">
  <option value='negra'>Negro</option>
  <option value='roja'>Rojo</option>
</select>

JS:

Código (javascript) [Seleccionar] Expandir

$('#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!

[Antoniio]

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"

[engel lex]

linea 46

Código (php) [Seleccionar] Expandir

 <?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

Código (html4strict) [Seleccionar] Expandir

<div class="rojo" onclick="cambiar_imagen('/imagen_para_color_rojo.jpg');" >color rojo</div>

y en js

Código (javascript) [Seleccionar] Expandir

cambiar_imagen(src){
$("#muestra").attr("src",src);
}

requiere más código en php, pero el código es más simple

[Antoniio]

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') "?