PHP - Cambiar la imagen de pendiendo la seleccionada

Pos: 98

Val: 66

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 05/08/2017 22:30:06

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

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:

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

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 3.943

Cambiar la imagen de pendiendo la seleccionada

Publicado por xve (6935 intervenciones) el 06/08/2017 08:05:15

Hola antonio, con el código que pones, no se muy bien como funciona, ni a que hace referencia cada cosa... pero para cambiar una imagen, puede ser tan sencillo como esto:

$('#idImagen').src="nuevaImagen.jpg";

Siento no poder serte de mas ayuda...

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 98

Val: 66

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 06/08/2017 09:05:35

Hola, gracias por responder. Sí, bueno, lo que pasa es que son varios los productos, por ejemplo si está en "Alfombra" debe haber las imágenes de los colores y poder cambiar, pero si está "Persianas" también debe estar las imágenes de los colores y otras imágenes de las persianas con esos colores, este es el código:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

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

Valora esta respuesta

Comentar

Pos: 98

Val: 66

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 06/08/2017 09:06:33

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

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="ramon@gmail.com" 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>

Valora esta respuesta

Comentar

Pos: 98

Val: 66

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 06/08/2017 09:06:56

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

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

Valora esta respuesta

Comentar

Pos: 98

Val: 66

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 06/08/2017 09:07:51

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

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

Valora esta respuesta

Comentar

Pos: 98

Val: 66

Cambiar la imagen de pendiendo la seleccionada

Publicado por Antonio (39 intervenciones) el 24/08/2017 19:12:38

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

Valora esta respuesta

Comentar

Cambiar la imagen de pendiendo la seleccionada

Publicado por alberto (4 intervenciones) el 13/09/2017 20:02:14

Hola Antonio, lo lograste o todavia no?, sino despues te paso una idea que a mi me funciona algo parecido a lo que vos queres hacer

Valora esta respuesta

Comentar

PHPExcel Problema

Mostrar imagenes desde una ruta en mysql en un catalogo html