elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  PHP (Moderador: #!drvy)
| | | |-+  Cambiar la imagen de pendiendo la seleccionada
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Cambiar la imagen de pendiendo la seleccionada  (Leído 3,093 veces)
Antoniio

Desconectado Desconectado

Mensajes: 121



Ver Perfil
Cambiar la imagen de pendiendo la seleccionada
« en: 5 Agosto 2017, 22:31 pm »

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

Mensajes: 438


Ver Perfil
Re: Cambiar la imagen de pendiendo la seleccionada
« Respuesta #1 en: 5 Agosto 2017, 23:43 pm »

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

HTML imagen:
Código
  1. <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
  1. <select id="estilo">
  2.   <option value='negra'>Negro</option>
  3.   <option value='roja'>Rojo</option>

JS:
Código
  1. $('#estilo').on('change', function() {
  2.   var value = $(this).val();
  3.   $('#foto').attr('src', 'alfombra1_' + value + '.jpg');
  4. });

Espero que te dé una idea de cómo adaptarlo a tus necesidades.

Saludos!


En línea

Antoniio

Desconectado Desconectado

Mensajes: 121



Ver Perfil
Re: Cambiar la imagen de pendiendo la seleccionada
« Respuesta #2 en: 10 Agosto 2017, 01:09 am »

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"
« Última modificación: 26 Agosto 2017, 14:11 pm por #!drvy » En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: Cambiar la imagen de pendiendo la seleccionada
« Respuesta #3 en: 26 Agosto 2017, 08:30 am »

linea 46
Código
  1.  <?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
  1. <div class="rojo" onclick="cambiar_imagen('/imagen_para_color_rojo.jpg');" >color rojo</div>

y en js
Código
  1. cambiar_imagen(src){
  2. $("#muestra").attr("src",src);
  3. }

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 Desconectado

Mensajes: 121



Ver Perfil
Re: Cambiar la imagen de pendiendo la seleccionada
« Respuesta #4 en: 26 Agosto 2017, 18:43 pm »

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

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
cambiar imagen de mi chat
Diseño Gráfico
todofluye 1 2,581 Último mensaje 4 Agosto 2004, 02:34 am
por Morris
cambiar bit de imagen
Programación C/C++
fatandaz 1 2,205 Último mensaje 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,625 Último mensaje 21 Junio 2012, 22:19 pm
por Graphixx
Cambiar imagen de from
.NET (C#, VB.NET, ASP)
Tomas1982 3 2,304 Último mensaje 11 Enero 2017, 17:39 pm
por Tomas1982
Cambiar imagen de un id
Desarrollo Web
cael1011 1 1,772 Último mensaje 21 Enero 2017, 03:01 am
por T1cxT4c
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines