Question

hi i want to addClass after clicking the raphael generated object http://jsfiddle.net/v2Ykt/

i had try to this

$('#inter-mapka a').click(function(){
        $('#inter-mapka a').removeClass("active");
        $(this).addClass("active");
    });

but nothing is happening, how can i do that

RAPHAEL

// A1   
    paper.path("M9,163.334 L12,163.25 L18.5,157 L80.958,157 L80.958,192 L64.5,192 L9,177.084Z").attr({"fill":"#6e3315", "stroke-width": 0, "fill-opacity": 0, "stroke": "transparent", "title": "budynek A1"}).mouseover(
        function () {
                this.animate({"fill-opacity": .7}, 200);
            }).mouseout(function () {
                this.animate({"fill-opacity": .0}, 200);
        });

GENERATED HTML

<div id="inter-mapka">

    <a title="budynek A1"><path style="fill-opacity: 0;" fill="#6e3315" stroke="none" d="M9,163.334L12,163.25L18.5,157L80.958,157L80.958,192L64.5,192L9,177.084Z" stroke-width="0" fill-opacity="0"/></a>

...

</div>

Answer 1

Sorry for the delay. I’ve had a play with this now and the only way I could get it to do what you wanted was entirely in Raphael – perhaps the DOM elements are ‘managed’ by Rapchael so the jQuery doesn’t ever really kick in properly

EDIT I’ve refactored this to simplify http://jsfiddle.net/joevallender/v2Ykt/6/

var paper = new Raphael(document.getElementById('inter-mapka'), 172, 276);

var a1 = paper.path("M9,163.334 L12,163.25 L18.5,157 L80.958,157 L80.958,192 L64.5,192 L9,177.084Z").attr({"title": "budynek A1"});

var a2 = paper.path("M3.875,141H38c0,0,7.75-3.875,10-8c0-4.5,0-18.5,0-18.5s0.375-5.625-11.125-5.625    s-30.719,0-30.719,0L6.125,110H5l-0.012,10.969L3.875,121V141z").attr({"title": "budynek A2"});

var a3 = paper.path("M81.125,93.188h-30c0,0-7.125-1.938-9.25-7.438c0-5.625,0-18.875,0-18.875    S42.503,61.75,48.001,61c5.624,0,33.124,0,33.124,0V93.188z").attr({"title": "budynek A3"});    

var a4 = paper.path("M5,39.875l7.875,6H40.75c0,0,8.375-0.25,7.25-7.5c0-7.25,0.104-19,0.104-19L44,10H5V39.875z").attr({"title": "budynek A4"});

var a5 = paper.path("M80,10v30.375c0,0,1.125,5,6,5.5c4.875,0,28.75,0,28.75,0L118.875,40V10H80z").attr({"title": "budynek A5"});

var all = [a1,a2,a3,a4,a5];

for(var i = 0; i < all.length; i++) {
  all[i].attr({"fill":"#6e3315", "stroke-width": 0, "fill-opacity": 0, 'stroke': '#f00'});
  all[i].mouseover(
    function () {
      this.animate({"fill-opacity": .7}, 200);
    }).mouseout(function () {
      this.animate({"fill-opacity": .0}, 200);
    });
  all[i].click(function(){
    clearAll();
    this.attr({"stroke-width": 1});
  });
}

function clearAll(){
  for(var i = 0; i < all.length; i++) {
    all[i].attr({"stroke-width": 0});
  }
}