title: Raphael js-onclick action that changes color?remain that color until returning to click in other
body: <p>I commented. I have problems with this library because it is the first time I use it. It took a couple of hours looking solution but I not find it.</p>
  
  <p>I need to change the color on mouseover to X color and back to original when no mouseover.</p>
  
  <p>On click change to Y color and remain so until you make another click, and mouseover keep it running.</p>
  
  <p>I have been guided by this example whit svg map: <a href="http://totaki.com/poesiabinaria/2014/10/crear-mapas-html5-interactivos-con-raphaeljs/" rel="nofollow">http://totaki.com/poesiabinaria/2014/10/crear-mapas-html5-interactivos-con-raphaeljs/</a> </p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;link href="includes/css_includes/noticias_index.css" rel="stylesheet" type="text/css" /&gt;
   &lt;head&gt;
      &lt;title&gt;Ejemplo Raphaeljs&lt;/title&gt;
      &lt;script type="text/javascript" src="includes/js_includes/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="includes/js_includes/raphael-min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
  &lt;div class="contenido_noti"&gt;
  
      &lt;h1&gt;RESULTADOS ELECCIONES 2012 - MUNICIPIOS&lt;/h1&gt;
  
  &lt;center&gt;
  &lt;table width="1180" border="0"&gt;
    &lt;tr&gt;
      &lt;th scope="col"&gt;MAPA&lt;/th&gt;
      &lt;th scope="col" style="text-align:center"&gt;ESTADISTICAS&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope="col" width=""&gt;    &lt;div id="lienzo"&gt;
  
      &lt;/div&gt;&lt;/th&gt;
      &lt;th scope="col" width="650" style="text-align:left"&gt;
      &lt;div id="municipiotxt"&gt;&lt;img id="loadingicon" src="img_main/selecciona.png" /&gt;&lt;/div&gt;
      &lt;/th&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/center&gt;
     &lt;script&gt;
        var municipios_data = {
      'ph1': 'Cadereyta de Montes',
      'ph2': 'Jalpan de Serra',
      'ph3': 'Colón',
      'ph4': 'Querétaro',
      'ph5': 'Pinal de Amoles',
      'ph6': 'Arroyo Seco',
      'ph7': 'Peñamiller',
      'ph8': 'El Marqués',
      'ph9': 'Tolimán',
      'ph10': 'Landa de matamoros',
      'ph11': 'Tequisquiapan',
      'ph12': 'Pedro Escobedo',
      'ph13': 'Ezequiel Montes',
      'ph14': 'San Joaquín',
      'ph15': 'Corregidora',
      'ph16': 'Huimilpan',
      'ph17': 'San Juan del Río',
      'ph18': 'Amealco de Bonfil'};
  
        var default_attributes = {
              fill: '#999999',
              stroke: '#000000',
              'stroke-width': 1,
          };  
        var $munictxt = $('#municipiotxt');
  
        $.ajax({
          url: 'includes/mapas/Mapa_muni.svg',
      type: 'GET',
      dataType: 'xml',
      success: function(xml) {
        var rjs = Raphael('lienzo', 570, 670);
        var corr="";
        $(xml).find('svg &gt; g &gt;  path').each(function() {
          var path = $(this).attr('d');
      var pid = $(this).attr('id');
      var pid_select="";
          var munic = rjs.path(path);
  
          munic.attr(default_attributes);
                  /*funcion de hover*/
          munic.hover(function() {    
  
  
            this.animate({ fill: '#00bbff' });
  
          }, /*funcion al moverso mouse*/ function() {
  
  
            this.animate({ fill: default_attributes.fill});
  
  
          })      /*funcion de click*/ .click(function() {
           var muni_query=municipios_data[pid];
           muni_select=pid;
  $("#municipiotxt").load("includes/querys_includes/mapa_muni_SVG_QUERY.php",{muni_query:muni_query});
     $munictxt.html(muni_select);
            this.animate({ fill: '#FF0000' });
  
          });
            });
      }
        });
  
      &lt;/script&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Sorry if my english is bad.</p>