 Autor
|
Tema: Cambiar la imagen de pendiendo la seleccionada (Leído 3,347 veces)
|
Antoniio
 Desconectado
Mensajes: 121
|
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=EnrollableSupongo 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 !!.
|
|
|
|
« Última modificación: 5 Agosto 2017, 23:14 pm por Antoniio »
|
En línea
|
|
|
|
xiruko
Desconectado
Mensajes: 438
|
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:
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!
|
|
|
|
|
En línea
|
|
|
|
Antoniio
Desconectado
Mensajes: 121
|
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/MgzWEi45Pero 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" |
|
|
|
« Última modificación: 26 Agosto 2017, 14:11 pm por #!drvy »
|
En línea
|
|
|
|
|
engel lex
|
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 |
|
|
|
« Última modificación: 26 Agosto 2017, 08:36 am por engel lex »
|
En línea
|
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
|
|
|
Antoniio
Desconectado
Mensajes: 121
|
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') "?
|
|
|
|
« Última modificación: 26 Agosto 2017, 18:44 pm por Antoniio »
|
En línea
|
|
|
|
|
| Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
|
cambiar imagen de mi chat
Diseño Gráfico
|
todofluye
|
1
|
2,754
|
4 Agosto 2004, 02:34 am
por Morris
|
|
|
|
cambiar bit de imagen
Programación C/C++
|
fatandaz
|
1
|
2,402
|
31 Mayo 2010, 21:35 pm
por 43H4FH44H45H4CH49H56H45H
|
|
|
|
Cambiar <option> seleccionada de un <select> segun valor en BD (PHP)
Desarrollo Web
|
Aikanáro Anário
|
2
|
23,930
|
21 Junio 2012, 22:19 pm
por Graphixx
|
|
|
|
Cambiar imagen de from
.NET (C#, VB.NET, ASP)
|
Tomas1982
|
3
|
2,547
|
11 Enero 2017, 17:39 pm
por Tomas1982
|
|
|
|
Cambiar imagen de un id
Desarrollo Web
|
cael1011
|
1
|
1,986
|
21 Enero 2017, 03:01 am
por T1cxT4c
|
 |
