Foros del Web » Programando para Internet » Javascript »

Cambiar de color con un clic JS

Estas en el tema de Cambiar de color con un clic JS en el foro de Javascript en Foros del Web. Tengo una imagen que esta dividida con mapa de imágenes. El objetivo es que al hacer clic sobre alguna de estas áreas cambie de color ...
  #1 (permalink)  
Antiguo 02/12/2014, 18:12
 
Fecha de Ingreso: julio-2014
Ubicación: México
Mensajes: 13
Antigüedad: 9 años, 8 meses
Puntos: 0
Cambiar de color con un clic JS

Tengo una imagen que esta dividida con mapa de imágenes.

El objetivo es que al hacer clic sobre alguna de estas áreas cambie de color de la siguiente manera:

al dar el primer clic cambie a color gris, al dar el segundo clic cambie a color rojo, al dar un tercer clic cambie a amarillo y por ultimo al dar un cuarto clic regrese a su estado original...

El proyecto estará realizado en javascript, lo he intentado cambiando el atributo css pero no he obtenido los resultados deseados, alguien me podría echar una mano con este problema.
  #2 (permalink)  
Antiguo 02/12/2014, 19:05
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Cambiar de color con un clic JS

Podrías tener un array con los colores y a cada elemento al que le debes de cambiar el color, le asignas un pseudo-atributo en el cual llevarás la cuenta de los clics, así, según sea el valor de dicha cuenta, asignarás uno de los colores del array al elemento. Un ejemplo:

Código HTML:
Ver original
  1. <div onclick = "color(this)" data-cuenta = "-1"></div>
  2. <div onclick = "color(this)" data-cuenta = "-1"></div>

Código Javascript:
Ver original
  1. function color(elemento){
  2.     var colores = ["gray", "red", "yellow"],
  3.         cuenta = Number(elemento.dataset.cuenta);
  4.    
  5.     if (cuenta + 1 <= colores.length - 1){
  6.         cuenta++;
  7.     }
  8.     else{
  9.         cuenta = 0;
  10.     }
  11.    
  12.     elemento.style.background = colores[cuenta];
  13.     elemento.dataset.cuenta = cuenta;
  14. }

Tengo dos divisiones a las cuales, cada vez que les de un clic, ejecutarán la función color y le pasaré al propio elemento como argumento. También defino al pseudo-atributo data-cuenta que iniciará con el valor -1 ya que, como el primer valor de un array se encuentra en la posición cero, al momento de dar el primer clic, el valor del pseudo-atributo se incrementará en uno, convirtiéndose en cero y pudiendo así tomar al primer elemento del array.

En la función, declaro al array con los tres colores y tomo el valor numérico del pseudo-atributo del elemento clickeado. Luego, si dicho valor más uno es menor o igual que la última posición del array (sería imposible intentar tomar un valor del array más allá del límite), entonces, incremento a dicho valor en uno, caso contrario, es decir, si el valor del pseudo-atributo es mayor que la última posición del array, lo fijo en cero para así tomar al primer elemento del array y generar el bucle.

Finalmente, asigno el color respectivo al elemento y actualizo el valor de su pseudo-atributo.

DEMO

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 02/12/2014, 19:31
 
Fecha de Ingreso: julio-2014
Ubicación: México
Mensajes: 13
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Cambiar de color con un clic JS

Wow, muchas gracias voy a implementarlo en mi mapa de imágenes y comento que tal quedo.
  #4 (permalink)  
Antiguo 02/12/2014, 23:01
 
Fecha de Ingreso: julio-2014
Ubicación: México
Mensajes: 13
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Cambiar de color con un clic JS

Ya lo intente pero sin tener éxito hice un ejemplo básico con la mapa de imágenes pero no da los clics...

Aqui lo que hice...
Código HTML:
Ver original
  1. <!doctype html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title>JS</title>    
  5.        
  6.                 <!-- JavaScript -->
  7.                 <script type="text/javascript" src="js/animacionColores.js"></script>
  8.     </head>
  9.  
  10.     <body>
  11.             <img src="imagenes/ciruclo.png" alt="" width="500" height="500" usemap="#circulo"/>
  12.                 <map name="circulo">
  13.                         <area shape="poly" coords="251,346,254,464,119,412,47,313,42,212,88,116,164,55,236,38,244,38" href="#" onclick = "color(this)" data-cuenta = "-1" >
  14.                
  15.                         <area shape="poly" coords="353,63,443,170,444,327,385,408,335,444,283,459,357,64,271,42,264,85,270,254,280,461" href="#" onclick = "color(this)" data-cuenta = "-1">
  16.                 </map>
  17.     </body>
  18. </html>

Código Javascript:
Ver original
  1. function color(elemento){
  2.     var colores = ["gray", "red", "yellow", "white"],
  3.         cuenta = Number(elemento.dataset.cuenta);
  4.    
  5.     if (cuenta + 1 <= colores.length - 1){
  6.         cuenta++;
  7.     }
  8.     else{
  9.         cuenta = 0;
  10.     }
  11.    
  12.     elemento.style.background = colores[cuenta];
  13.     elemento.dataset.cuenta = cuenta;
  14.     /*elemento.innerText = cuenta + 1;*/
  15. }
  #5 (permalink)  
Antiguo 03/12/2014, 02:08
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Cambiar de color con un clic JS

Revisando el código en vivo, el cambio de color sí se produce, lo que está mal son las coordenadas que utilizas, por eso no llegas a ver los cambios. Corrige eso.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #6 (permalink)  
Antiguo 03/12/2014, 12:16
 
Fecha de Ingreso: julio-2014
Ubicación: México
Mensajes: 13
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Cambiar de color con un clic JS

ya cheque las coordenadas pero no puedo, no se que este mal...
  #7 (permalink)  
Antiguo 03/12/2014, 20:45
 
Fecha de Ingreso: julio-2014
Ubicación: México
Mensajes: 13
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Cambiar de color con un clic JS

Al parecer los estilos css no hacen ningún efecto sobre las etiquetas <area></area>, alguien me podría decir por que o si hay alguna forma de resolver esto...
  #8 (permalink)  
Antiguo 03/12/2014, 23:08
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Cambiar de color con un clic JS

Quizá esto te sirva.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #9 (permalink)  
Antiguo 08/12/2014, 14:20
 
Fecha de Ingreso: julio-2014
Ubicación: México
Mensajes: 13
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Cambiar de color con un clic JS

Ya tengo el proyecto bastante avanzado utilizando el plugin recomendado el de imagemapster, pero sigo teniendo problemas para hacer que cambie de color con los clics, alguna idea...

https://mega.co.nz/#!eRwVSYBK!6ipvKdHFfcnFWXySkjrQwU1ELH8Gwy47rRm4-OvHqEs
  #10 (permalink)  
Antiguo 08/12/2014, 19:08
 
Fecha de Ingreso: julio-2014
Ubicación: México
Mensajes: 13
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Cambiar de color con un clic JS

Quise fucionar los dos codigos pero no puedo hacer que se quede seleccionado... el codigo quedo asi...

Código Javascript:
Ver original
  1. function color(elemento){
  2.                 var colores = ['BDBDBD', 'FF0000', 'FFFF00', 'FFFFFF'],
  3.                     cuenta = Number(elemento.dataset.cuenta);
  4.                
  5.                 if (cuenta + 1 <= colores.length - 1){
  6.                     cuenta++;
  7.                 }
  8.                 else{
  9.                     cuenta = 0;
  10.                 }
  11.                
  12.                 /*elemento.style.color = colores[cuenta];*/
  13.                 elemento.dataset.cuenta = cuenta;
  14.            
  15.            
  16.         var image = $('#cuerpoDermatomas');
  17.             $('#cuerpoDermatomas').mapster({        
  18.                 mapKey: 'data-key',
  19.                 fillColor: colores[cuenta],
  20.                 render_highlight: {
  21.             fillOpacity: 1
  22.         },
  23.         render_select: {
  24.             fillOpacity: 0.6
  25.         },
  26.                 singleSelect: false,
  27.                 mapKey: 'name',
  28.                 listKey: 'name',
  29.                 onClick: function (e) {
  30.                 $('#selections').html(xref[e.key]);
  31.             },
  32.         showToolTip: true,
  33.         toolTipClose: ["tooltip-click", "area-click"],
  34.         areas: [
  35.             {
  36.                 key: "c",
  37.                 toolTip: "Entre Rios, capital: Parana"
  38.  
  39.             },
  40.             {
  41.                 key: "misiones",
  42.                 fillColor: "fff000",
  43.                 toolTip: "Misiones, capital: Posadas"
  44.  
  45.             },
  46.             {
  47.                 key: "cordoba",
  48.                 fillColor: "000000",
  49.                 toolTip: "Córdoba, capital: Córdoba"
  50.  
  51.             },
  52.             {
  53.                 key: "buenosaires",
  54.                 toolTip: "Buenos Aires, capital: La Plata"
  55.             },
  56.             {
  57.                 key: "chubut",
  58.                 strokeColor: "FFFFFF",
  59.                 toolTip: "Chubut, capital: Rawson"
  60.  
  61.             }
  62.             ]
  63.         });
  64.                
  65.             }

si quieren ver como queda...

https://mega.co.nz/#!SARmxYqC!LJfkZBAp2cu7xge_mcdLxwW4WzttiJhS8SQXFnH Ot-Y

El problema es que se resetea todo cuando le doy clic a las áreas en las que se incluyo, mientras que todo lo demás toma ese color...

Código HTML:
Ver original
  1. data-cuenta = "-1" onClick="color(this)"

Etiquetas: clic, color, imagenes, mapa
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 16:13.