06/08/2017, 00:55
|
 | | | Fecha de Ingreso: mayo-2015 Ubicación: México, Sonora.
Mensajes: 180
Antigüedad: 9 años, 9 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'){
}
}
|