Foros del Web » Programando para Internet » PHP »

Cambiar la imagen dependiendo la seleccionada

Estas en el tema de Cambiar la imagen dependiendo la seleccionada en el foro de PHP en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/08/2017, 14:33
Avatar de Jose_A  
Fecha de Ingreso: mayo-2015
Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 8 años, 10 meses
Puntos: 0
Cambiar la imagen dependiendo la seleccionada

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.

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'){

 * *}
 *}
Pero no se como hacer para aplicarlo ahora con colores y hacer que vaya cambiando la imagen...

Un saludo !!.
  #2 (permalink)  
Antiguo 05/08/2017, 14:45
Avatar de petit89  
Fecha de Ingreso: marzo-2011
Mensajes: 1.135
Antigüedad: 13 años
Puntos: 169
Respuesta: Cambiar la imagen de pendiendo la seleccionada

Javascript basico, seria asi:
Código Javascript:
Ver original
  1. <script language="javascript">
  2. var img= new Array(3)
  3. img [0]= "rojo.jpg";
  4. img [1]= "azul.jpg";
  5. img [2]= "verde.jpg";
  6. var i = 0;
  7.  
  8.  
  9. function cargarImagen(){
  10.   document.imgSrc.src = img[i] ;
  11. }
  12.  
  13. function imgcargada(valor){
  14.     var NumImagen = valor;
  15.   document.imgSrc.src = img[NumImagen];
  16. }
  17.  
  18. window.onload=cargarImagen;
  19.  
  20. </script>
el campo donde lo mostraras
Código HTML:
Ver original
  1. <img name="imgSrc" id="imgSrc" border="0"/>
los links de las miniaturas
Código HTML:
Ver original
  1. <a onclick="imgcargada(0);" style="cursor:pointer"><img src="miniatura_roja.jpg" /></a>
  2. <a onclick="imgcargada(1);" style="cursor:pointer"><img src="miniatura_azul.jpg" /></a>
__________________
█ WebHosting / Reseller a bajo costo | Uptime Garantizado | Soporte en Español e Ingles
¿Te sirvió la respuesta? Deja un +1 (Triangulo negro al lado derecho)
  #3 (permalink)  
Antiguo 06/08/2017, 00:55
Avatar de Jose_A  
Fecha de Ingreso: mayo-2015
Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Cambiar la imagen de pendiendo la seleccionada

El problema es que son varios los productos, osea, tendría que hacerse con distintos valores, mira:
Código:
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>CALIFORNIA INTERIORS --  Cotizador</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <meta name="viewport" content="width=device-width" />

    
  <link href="assets/css/bootstrap.min.css" rel="stylesheet" />

  <link href="assets/css/bootstrap-theme.min.css" rel="stylesheet" />
  <link href="assets/js/bootstrap.min.js" rel="stylesheet" />

	<link href="assets/css/gsdk-base.css" rel="stylesheet" />
    
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">

  <script>

  function sel_prod(value) //Lo que pasa cuando se selecciona un producto
  {
    $('#estilo').val('').change();
    $('#estiloP').val('').change();

    var select=document.getElementById("estilo");
    var op=select.getElementsByTagName("option");

    var select_r=document.getElementById("rango");
    var op_r=select_r.getElementsByTagName("option");


    if(value==''){
      for (var i = 1; i < op.length; i++) op[i].style.display="none";
    }else if(value=='Alfombra'){
      $('#img_prod').attr("src",'img/alfombra.jpg'); //**************imagen para alfombra****************
      //mostrar ventana que diga que todos las alfombras son bajo pedido
      //alert("Todas las alfombras son bajo pedido.");

   //   $("#msg-pedido").css('display','block');
      

      //mostramos y ocultamos estilos
      for (var i = 0; i < 3; i++) op[i].style.display="block";
      for (var i = 3; i < op.length; i++) op[i].style.display="none";

      $('#div_estilos').css('display','block');
      $('#div_est_pasto').css('display','none');
      $('#div_calidad').css('display','block');
      $('#div_color_pers').css('display','none');

      $('#mExterior').css('display', 'none');
      $('#mInterior').css('display', 'none');

    }else if(value=='Pasto'){
      $('#img_prod').attr("src",'img/pasto.jpg'); //**************imagen para pasto ****************
      $('#div_estilos').css('display','none');
      $('#div_est_pasto').css('display','block');
      $('#div_calidad').css('display','none');
      $('#div_color_pers').css('display','none');

      $('#mExterior').css('display', 'none');
      $('#mInterior').css('display', 'none');
      $('#color').css('display', 'none');

      for (var i = 1; i < 10; i++) op_r[i].style.display="none";
      for (var i = 10; i < 12; i++) op_r[i].style.display="block";
      for (var i = 12; i < op_r.length; i++) op_r[i].style.display="none";

    }else if(value=='Piso'){
      $('#img_prod').attr("src",'img/piso.jpg'); //**************imagen para piso ****************
      for (var i = 1; i < 3; i++) op[i].style.display="none";
      for (var i = 3; i < 7; i++) op[i].style.display="block";
      for (var i = 7; i < op.length; i++) op[i].style.display="none";

      $('#div_estilos').css('display','block');
      $('#div_est_pasto').css('display','none');
      $('#div_calidad').css('display','block');
      $('#div_color_pers').css('display','none');

      $('#mExterior').css('display', 'none');
      $('#mInterior').css('display', 'none');
      
    }else if(value=='Persianas'){
      /*for (var i = 1; i < 7; i++) op[i].style.display="none"; <!--Estilo de las persianas-->
      for (var i = 7; i < op.length; i++) op[i].style.display="block";*/

      $('#img_prod').attr("src",'img/persianas.jpg'); //**************imagen para persianas ****************
      for (var i = 1; i < 18; i++) op_r[i].style.display="none";
      for (var i = 18; i < 21; i++) op_r[i].style.display="block";
      for (var i = 21; i < op_r.length; i++) op_r[i].style.display="none";

      $('#div_estilos').css('display','none');
      $('#div_est_pasto').css('display','none');
      $('#div_calidad').css('display','none');
      $('#div_color_pers').css('display', 'block');

      $('#mExterior').css('display', 'block');
      $('#mInterior').css('display', 'block');
    }
  }

  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'){

    }
  }
  #4 (permalink)  
Antiguo 06/08/2017, 00:57
Avatar de Jose_A  
Fecha de Ingreso: mayo-2015
Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Cambiar la imagen de pendiendo la seleccionada

Código:
  function sel_rango(value) //lo que pasa cuando se selecciona un rango
  {
    $('#calidad').val('').change();
    var select=document.getElementById("calidad");
    var op=select.getElementsByTagName("option");

    $('#estiloP').val('').change();
    var select=document.getElementById("estiloP");
    var op_P=select.getElementsByTagName("option");

    $('#colorPers').val('').change();
    var select=document.getElementById("colorPers");
    var op_Pers=select.getElementsByTagName("option");

    if(value==''){
      for (var i = 1; i < op.length; i++) op[i].style.display="none";
      for (var i = 1; i < op_P.length; i++) op_P[i].style.display="none";
      for (var i = 1; i < op_Pers.length; i++) op_Pers[i].style.display="none";
    }else if(value=='250'){
      op[1].style.display="block";
      op[2].style.display="none";
      op[3].style.display="none";
      op[4].style.display="none";
      for (var i = 5; i < op.length; i++) op[i].style.display="none";

    }else if(value=='351'){
      op[2].style.display="block";
      op[3].style.display="block";
      op[4].style.display="block";
      op[1].style.display="none";
      for (var i =5 ; i < op.length; i++) op[i].style.display="none";

    }else if(value=='300'){
      for (var i = 1; i < 5; i++) op[i].style.display="none";
      op[5].style.display="block";
      for (var i = 6; i < op.length; i++) op[i].style.display="none";
    }else if(value=='451'){
      for (var i = 1; i < 6; i++) op[i].style.display="none";
      op[6].style.display="block";
      for (var i = 7; i < op.length; i++) op[i].style.display="none";
    }else if(value=='601_1'){
      for (var i = 1; i < 7; i++) op[i].style.display="none";
      op[7].style.display="block";
      for (var i = 8; i < op.length; i++) op[i].style.display="none";
    }else if(value=='751'){
      for (var i = 1; i < 8; i++) op[i].style.display="none";
      op[8].style.display="block";
      for (var i = 9; i < op.length; i++) op[i].style.display="none";
    }else if(value=='951'){
      for (var i = 1; i < 9; i++) op[i].style.display="none";
      op[9].style.display="block";
      for (var i = 10; i < op.length; i++) op[i].style.display="none";
    }else if(value=='1101'){
      for (var i = 1; i < 10; i++) op[i].style.display="none";
      op[10].style.display="block";
      for (var i = 11; i < op.length; i++) op[i].style.display="none";
    }else if(value=='1250'){
      for (var i = 1; i < 11; i++) op[i].style.display="none";
      op[11].style.display="block";
      for (var i = 12; i < op.length; i++) op[i].style.display="none";
    }else if(value=='450'){
      op_P[1].style.display="block";
      op_P[2].style.display="none";
      op_P[3].style.display="none";
    }else if(value=='450_2'){
      op_P[2].style.display="block";
      op_P[1].style.display="none";
      op_P[3].style.display="none";
    }else if(value=='601_2'){
      op_P[3].style.display="block";
      op_P[1].style.display="none";
      op_P[2].style.display="none";
    }else if(value=='350'){
      for (var i = 1; i < 13; i++) op[i].style.display="none";
      op[12].style.display="block";
      for (var i = 14; i < op.length; i++) op[i].style.display="none";
    }else if(value=='401'){
      for (var i = 1; i < 13; i++) op[i].style.display="none";
      for (var i = 13; i < 15; i++) op[i].style.display="block";
      for (var i = 15; i < op.length; i++) op[i].style.display="none";
    }else if(value=='500'){
      for (var i = 1; i < 15; i++) op[i].style.display="none";
      op[15].style.display="block";
      for (var i = 16; i < op.length; i++) op[i].style.display="none";
    }else if(value=='551'){
      for (var i = 1; i < 16; i++) op[i].style.display="none";
      op[16].style.display="block";
      for (var i = 17; i < op.length; i++) op[i].style.display="none";
    }else if(value=='600'){
      for (var i = 1; i < 17; i++) op[i].style.display="none";
      op[17].style.display="block";
      for (var i = 18; i < op.length; i++) op[i].style.display="none";
    }else if(value=='700'){
      for (var i = 1; i < 18; i++) op[i].style.display="none";
      op[18].style.display="block";
      for (var i = 19; i < op.length; i++) op[i].style.display="none";
    }else if(value=='1000'){
      for (var i = 1; i < 4; i++) op_Pers[i].style.display="block";
      for (var i = 4; i < op.length; i++) op_Pers[i].style.display="none";
    }else if(value=='1501'){
      for (var i = 1; i < 4; i++) op_Pers[i].style.display="none";
      for (var i = 4; i < 7; i++) op_Pers[i].style.display="block";
      for (var i = 7; i < op_Pers.length; i++) op_Pers[i].style.display="none";
    }else if(value=='2002'){
      for (var i = 1; i < 7; i++) op_Pers[i].style.display="none";
      for (var i = 7; i < op_Pers.length; i++) op_Pers[i].style.display="block";
    }

  }

  </script>
</head>
<body >
<div class="image-container set-full-height" style="background-image: url('http://4.bp.blogspot.com/-P64BfRcnZK8/UXCHQvUE6lI/AAAAAAAAAis/_rQYb8Xn4AY/s1600/claves-para-una-decoracion-vintage.jpg')">
    
    
    <!--   Big container   -->
    <div class="container">
        <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
           
            <!--      Wizard container        -->   
            <div class="wizard-container"> 
                
                <div class="card wizard-card ct-wizard-orange" id="wizardProfile">
                    <form action="" method="post" id="estimate">
                <!--        You can switch "ct-wizard-orange"  with one of the next bright colors: "ct-wizard-blue", "ct-wizard-green", "ct-wizard-orange", "ct-wizard-red"             -->
                
                    	<div class="wizard-header">
                        	<h3>
                        	   <b>COTIZADOR</b>  CALIFORNIA INTERIORS <br>
                        	   <small>El fino complemento para decorar</small>
                        	</h3>
                    	</div>
                    	<ul>
                            <li><a href="#about" data-toggle="tab">Información del Cliente</a></li>
                            <li><a href="#account" data-toggle="tab">Información del Producto</a></li>
                            <li><a href="#address" data-toggle="tab">Características del Producto</a></li>
                        </ul>
                        
                        <div class="tab-content">
                            <div class="tab-pane" id="about">
                              <div class="row">
                                  <h4 class="info-text">Información del Cliente </h4>
                                  
                                  <div class="col-sm-6 col-sm-offset-3">
                                      <div class="form-group">
                                        <label>Nombres</label>
                                        <input name="firstname" type="text" class="form-control" placeholder="Antonio Gamez..." required>
                                      </div>
                                      
                                  </div>
								  
								  
                                  <div class="col-sm-6 col-sm-offset-3">
                                      <div class="form-group">
                                          <label>Email</label>
                                          <input name="email" type="email" class="form-control" placeholder="[email protected]" required>
                                      </div>
                                  </div>
								  
								  <div class="col-sm-6 col-sm-offset-3">
                                      <div class="form-group">
                                          <label>Celular</label>
                                          <input name="phone" type="text" class="form-control" placeholder="6621....">
                                      </div>
                                  </div>
                              </div>
                            </div>
                            <div class="tab-pane" id="account">
                                <h4 class="info-text"> Información del producto </h4>
                                <div class="row">
                                   <div class="col-sm-4">
									<img id="img_prod" src='http://www.vintagedecoracion.com.mx/images/neulux/persianas-neulux.jpg' class='img-responsive'>
								 
								</div>


								<div class="col-sm-8">
                  <div class="form-group">
                    <label>Producto <small>(Requerido)</small></label>
                     <select class='form-control' required name='producto'  onchange="sel_prod(this.value)">
											<option value=''>-- Selecciona --</option>
											<option value='Alfombra' data-toggle="modal" data-target="#msg-pedido">Alfombra</option>
											<option value='Pasto'>Pasto Sintético</option>
											<option value='Piso'>Piso Laminado-TERZA</option>
                      <option value='Persianas'>Persianas</option>
									
										</select>
                  </div>     
                  
                  <div class="col-sm-15">
                      <div class="form-group">
                          <label>Área</label>
                          <input type="text" name="ancho" class="form-control" placeholder="Sala, Estancia, Escalera, Patio, etc." required>
                      </div>
                  </div>
  #5 (permalink)  
Antiguo 06/08/2017, 00:58
Avatar de Jose_A  
Fecha de Ingreso: mayo-2015
Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Cambiar la imagen de pendiendo la seleccionada

Código:
  <div class="col-sm-4">
                      <div class="form-group">
                          <label>Ancho</label>
                          <input type="text" name="ancho" class="form-control" placeholder="1.205" required>
                      </div>
                  </div>


                  <div class="col-sm-4">
                      <div class="form-group">
                          <label>Largo</label>
                          <input type="text" name="ancho" class="form-control" placeholder="1.205" required> 
                      </div> 
                   </div>
                                    
                  <div class="col-sm-4">
                      <div class="form-group">
                         <label>ó</label> <label>Metros Cuadrados</label>
                           <input type="text" name="ancho" class="form-control" placeholder="1.205" required>
                      </div>
                  </div>

                  
									  <div id="div_estilos" class="form-group">
                                        <label>Estilo </label>
                                        <select class='form-control' id="estilo" required name='estilo' onchange="sel_estilo(this.value)">
											<option value=''>-- Selecciona --</option>
                       <!--     Alfombra       -->   
											<option value='Trafico' style="display:none">Tráfico Pesado</option> <!--1-->
											<option value='Residencial' style="display:none">Residencial</option>
                       <!--      Pasto Sintético         
                      <option value='R21' style="display:none">R21 G32(Bajo pedido)</option> 
                      <option value='Bermuda' style="display:none">Bermuda</option>-->
                       <!--      Piso Laminado       -->   
                      <option value='7mm' style="display:none">7mm</option> <!--3-->
                      <option value='8mm' style="display:none">8mm</option>
                      <option value='10mm' style="display:none">10mm</option>
											<option value='12mm' style="display:none">12mm</option>
                      <!--      Persianas      --> 
                      <option value='Rollet' style="display:none">Rollet</option> <!--7-->
                      <option value='Wollet' style="display:none">Wollet</option>
                      <option value='Panellet' style="display:none">Panellet</option>
                      <option value='Aluminix' style="display:none">Aluminix</option>
										</select>
                   </div>

                <div  class="form-group">
                    <label>Rango de precios</label>
                    <select class='form-control' required id="rango" name='rango' onchange="sel_rango(this.value)">
                      <option value=''>-- Selecciona --</option>
                      <!--      Calidad Alfombra (Trafico Pesado)       --> 
                      <option value='250' style="display:none">$250 - $350</option> <!--1-->
                      <option value='351' style="display:none">$351 - $450</option>
                      <!--      Calidad Alfombra (Residencial)       --> 
                      <option value='300' style="display:none">$300 - $450</option> <!--3-->
                      <option value='451' style="display:none">$451 - $600</option>
                      <option value='601_1' style="display:none">$601 - $750</option>
                      <option value='751' style="display:none">$751 - $950</option>
                      <option value='951' style="display:none">$951 - $1100</option>
                      <option value='1101' style="display:none">$1101 - $1250</option>
                      <option value='1250' style="display:none">$1250 - $1400</option>
                      <!--    Pasto Sintético      --> 
                      <option value='450' style="display:none">$450 - $600</option>
                      <option value='450_2' style="display:none">$450 - $600</option> <!--10-->
                      <option value='601_2' style="display:none">$601 - $750</option>
                      <!--      Piso Laminado       --> 
                      <option value='350' style="display:none">$350 - $400</option> <!--12-->
                      <option value='401' style="display:none">$401 - $450</option>
                      <option value='500' style="display:none">$500 - $550</option>
                      <option value='551' style="display:none">$551 - $600</option>
                      <option value='600' style="display:none">$600 - $650</option>
                      <option value='700' style="display:none">$700 - $750</option>
                        <!--    Persianas      --> 
                      <option value='1000' style="display:none">$1000 - $1500</option> <!--18-->
                      <option value='1501' style="display:none">$1501 - $2001</option>
                      <option value='2002' style="display:none">$2002 - $2502</option>
                      <option value='2503' style="display:none">$2503 - $3003</option>   
                    </select>
                </div>

                <div id="div_est_pasto" style="display:none" class="form-group">
                    <label>Estilo </label>
                    <select class='form-control' required id="estiloP"  name='estiloP' ">
                      <option value=''>-- Selecciona --</option>
                       <!--      Pasto Sintético       -->   
                      <option value='R21' style="display:none">R21 (Bajo pedido)</option>
                      <option value='G32' style="display:none">G32 (Bajo pedido)</option>
                     <!--3-->
                      <option value='Bermuda' style="display:none">Bermuda</option>
                    </select>
                </div>

                <div id="div_calidad" class="form-group">
                    <label>Calidad</label>
                     <select class='form-control' id ="calidad" required name='calidad'>
                      <option value=''>-- Selecciona --</option>
                             <!--      Calidad Alfombra (Tráfico Pesado)       --> 
                      <option value='Sprint' style="display:none">Guerrero-Sprint</option> <!--1-->
                      <option value='Gladiador' style="display:none">Gladiador</option>
                      <option value='Gladiador' style="display:none">Curator</option>
                      <option value='Curator' style="display:none">Olefina(Bajo Pedido)</option>
                             <!--      Calidad Alfombra (Residencial)       --> 
                      <option value='Sprint' style="display:none">Montreal</option> <!--5-->
                      <option value='Gladiador' style="display:none">Venus</option>
                      <option value='Curator' style="display:none">Castelo, Ejecutiva</option>
                      <option value='Olefina' style="display:none">Ejecutiva</option>
                      <option value='Olefina' style="display:none">Montecarlo</option>
                      <option value='Olefina' style="display:none">Castelo</option>
                      <option value='Olefina' style="display:none">Glam</option>
                                   <!--     Piso Laminado       --> 
                      <option value='Sprint' style="display:none">Casual</option> <!--12-->
                      <option value='Ambienta' style="display:none">Ambienta</option> 
                      <option value='Gladiador' style="display:none">Trend</option>
                      <option value='Curator' style="display:none">Style</option>
                      <option value='Olefina' style="display:none">Splendor</option>
                      <option value='Sprint' style="display:none">Hickory</option>
                      <option value='Gladiador' style="display:none">Grand Walnut</option>
                      <option value='Curator' style="display:none">Mammut Plus</option>  
                    </select>
                </div>
                <div id="div_color_pers" style="display: none" class="form-group">
                    <label>Color</label>
                     <select class='form-control' id ="colorPers" required name='colorPers'>
                      <option value=''>-- Selecciona --</option>
                             <!--      Color para Persianas       --> 
                      <option value='rojo' style="display:none">Rojo</option> <!--1-->
                      <option value='negro' style="display:none">Negro</option>
                      <option value='azul' style="display:none">Azul</option> 
                      <option value='gris' style="display:none">Gris</option>
                      <option value='blanco' style="display:none">Blanco</option>
                      <option value='plateado' style="display:none">Plateado</option>
                      <option value='dorado' style="display:none">Dorado</option>
                      <option value='esmeralda' style="display:none">Esmeralda</option>
                    </select>
                </div>
  #6 (permalink)  
Antiguo 06/08/2017, 00:59
Avatar de Jose_A  
Fecha de Ingreso: mayo-2015
Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Cambiar la imagen de pendiendo la seleccionada

Código:
      </div>
								  
                                    
                                </div>
                            </div>
                            <div class="tab-pane" id="address">
                                 <div class="row">
                                    <div class="col-sm-12">
                                        <h4 class="info-text"> Características del Producto </h4>
                                    </div>
                                    <div id="color" class="col-sm-6">
                                         <div class="form-group">
                                          <label>Color</label><br>
                                          <select name="exterior" class="form-control" >
                                              <option value="">-- Selecciona --</option>
                                              <option value="AF">Rojo</option>
                                              <option value="AX">Azul</option>
                                          </select>
                                        </div>
                                  </div>
                    
                                  <div class="col-sm-3">
                                      <div class="form-group">
                                        <label>Cantidad</label>
                                        <input name="cantidad" type="cantidad" class="form-control" placeholder="3...">
                                      </div>
                                  </div>
                                  <div id="mExterior" class="col-sm-6" style="display:none">
                                      <div class="form-group">
                                        <label>Marco Exterior</label><br>
                                        <select name="exterior" class="form-control" >
                                          <option value="">-- Selecciona --</option>
                      										<option value="AF">Sí</option>
                        									<option value="AX">No</option>
                                        </select>
                                      </div>
                                  </div>
                                  <div id="mInterior" class="col-sm-6" style="display:none">
                                         <div class="form-group">
                                            <label>Marco Interior</label><br>
                                             <select name="interior" class="form-control" >
                                                <option value="">-- Selecciona --</option>
                        												<option value="AF">Sí</option>
                        												<option value="AX">No</option>
                                            </select>
                                          </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="wizard-footer">
						<div id='result'></div>
						<hr>
                            <div class="pull-right">
                                <input type='button' class='btn btn-next btn-fill btn-warning btn-wd btn-sm' name='next' value='Siguiente' />
                                <input type='submit' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish' value='Finalizar' />
								
        
                            </div>
                            
                            <div class="pull-left">
                                <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' value='Anterior' />
                            </div>
								
                            <div class="clearfix"></div>
                        </div>	
                    </form>
                </div>
            </div> <!-- wizard container -->
        </div>
        </div><!-- end row -->

        <!--Mensaje: Alfombras bajo pedido-->
        <div id="msg-pedido" class="modal fade">
          <div class="modal-dialog " >
            <div class="modal-content">
              <div class="modal-header">
                <button tyle="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Atenci&oacuten:</h4>
              </div>
              <div class="modal-body">
                <p>Todas las alfombras Residenciales son bajo pedido.</p>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
              </div>
            </div>
          </div>
        </div>
	
    </div> <!--  big container -->
    
    
    <div class="footer">
        
    </div>

</div>

</body>

    <script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
		
	<!--   plugins 	 -->
	<script src="assets/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>
	
    <!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
	<script src="assets/js/jquery.validate.min.js"></script>
	
    <!--  methods for manipulating the wizard and the validation -->
	<script src="assets/js/wizard.js"></script>
	<script>
		var form1 = $( "#estimate" );
		form1.validate();
		$( "#estimate" ).submit(function( event ) {
			if (form1.valid()==true){
		  var parametros = $(this).serialize();
			  $.ajax({
				type: "POST",
				url: "process.php",
				data: parametros,
				 beforeSend: function(objeto){
					$("#result").html("Mensaje: Cargando...");
				  },
				success: function(datos){
				$("#result").html(datos);
				
			  }
			});
		  event.preventDefault();
			}  
		});
	</script>

</html>
Como lo podría hacer cuando esté seleccionado "Alfombra", y cuando esté "Piso Laminado" y demás?, saludos.
  #7 (permalink)  
Antiguo 08/08/2017, 00:39
Avatar de Jose_A  
Fecha de Ingreso: mayo-2015
Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Cambiar la imagen dependiendo la seleccionada

Aún no puedo hacerlo con cada producto
  #8 (permalink)  
Antiguo 08/08/2017, 08:35
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 9 meses
Puntos: 263
Respuesta: Cambiar la imagen dependiendo la seleccionada

Esta es una manera en que yo lo haria:

MUESTRA

Pero no es algo tan dificil de hacer, ya lo he hechos en muchos carros de pedidos, en todo caso va a depender de como estes almacenando las imagenes adicionales en tu base (las rutas), como las traigas al momento de ver el producto entre otras cosas
__________________
[email protected]
HITCEL
  #9 (permalink)  
Antiguo 19/08/2017, 23:22
Avatar de Jose_A  
Fecha de Ingreso: mayo-2015
Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Cambiar la imagen dependiendo la seleccionada

Cita:
Iniciado por xfxstudios Ver Mensaje
Esta es una manera en que yo lo haria:

MUESTRA

Pero no es algo tan dificil de hacer, ya lo he hechos en muchos carros de pedidos, en todo caso va a depender de como estes almacenando las imagenes adicionales en tu base (las rutas), como las traigas al momento de ver el producto entre otras cosas
Exactamente eso es lo que necesito pero el código que me dieron a mi en php es complicado para añadirlo con ese que tienes, más si no tengo experiencia en php.
https://pastebin.com/AxFCgPDP
hay alguna manera más sencilla de juntar ambos??
  #10 (permalink)  
Antiguo 26/08/2017, 00:23
Avatar de Jose_A  
Fecha de Ingreso: mayo-2015
Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Cambiar la imagen dependiendo la seleccionada

Intenté hacerlo, quedó así:
https://pastebin.com/MgzWEi45

Pero me marca error en la línea 48, alguna sugerencia?
  #11 (permalink)  
Antiguo 26/08/2017, 15:55
alvaro_trewhela
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Cambiar la imagen dependiendo la seleccionada

Y esto que tiene que ver con php?

Etiquetas: select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:18.