Raphael and targeting nodes within a Set
I have a set
of Raphael Images that are being put at random on the canvas. I would like each of these images to have a rollover but I think I have my syntax wrong :( any ideas?
JSFiddle: http://jsfiddle.net/neuroflux/VS6gT/1/ (Edited to include the libraries)
Code Snippet:
for (var i = 0; i <= a; i++) {
var ax = Math.floor(Math.random() * dw) + 1;
var ay = Math.floor(Math.random() * dh) + 1;
var ao = Math.floor(Math.random() * 10) + 1;
var ac = Math.floor(Math.random() * 4) + 1;
if (ac == 1) { col = 'earth.gif'; } else
if (ac == 2) { col = 'jupiter.gif'; } else
if (ac == 3) { col = 'neptune.gif'; }
var planetName = nameGen();
st.push = (
planet = r.image(col, ax,ay,ac,ac).attr({
'fill':'#fff',
'opacity':'0.'+ao,
'stroke-width':0,
'cursor':'pointer'
}).id = planetName
);
}
st.mouseover(function() {
if (info) { info.remove(); }
this.node.animate({
'scale':30
}, 250);
this.animate({
'rotation':999
}, 25000);
info = r.rect(5,5,200,150).attr({
'fill':'#fff',
'stroke':'#ff0000'
});
infoText = r.text(75,2开发者_开发知识库5,'PLANET NAME: \r\n'+this.id+'\r\n\r\nDISTANCE: \r\n'+(1.0 - this.attr('opacity'))*10).attr({
'font-size':14
});
}).mouseout(function() {
this.animate({
'scale':1
}, 250);
});
It seems like attaching events to the set doesn't work, but you can attach them direct to the planets as you're creating them:
var planet = r.image(col, ax,ay,ac,ac).attr({
'fill':'#fff',
'opacity':'0.'+ao,
'stroke-width':0,
'cursor':'pointer'
});
planet.id = planetName;
st.push = planet;
planet.mouseover(function() {
if (info) { info.remove(); }
this.animate({
'scale':30
}, 250);
this.animate({
'rotation':999
}, 25000);
info = r.rect(5,5,200,150).attr({
'fill':'#fff',
'stroke':'#ff0000'
});
infoText = r.text(75,25,'PLANET NAME: \r\n'+this.id+'\r\n\r\nDISTANCE: \r\n'+(1.0 - this.attr('opacity'))*10).attr({
'font-size':14
});
}).mouseout(function() {
this.animate({
'scale':1
}, 250);
});
}
The only other thing I had to change was this.node.animate
to this.animate
, then it seems to be working.
精彩评论