Question

Say I have var mycircle = paper.circle(0, 0, 20).attr({stroke: "#ff0000"});

Now by default when someone goes to my page at www.url.com/index.html they get this circle with the red stroke.

However, what if I wanted
the circle stroke to change if a #hash was defined when browsing, e.g.
a selection was made and you wanted to link it to someone. Say someone
browses to www.url.com/index.html#mycircle now.

With: var hash = window.location.hash.substr(1) I can make the variable hash return “mycircle”.

However, by doing
hash.attr({stroke: "#0000ff"}); the stroke colour wont change to blue! Is there a way around this so I could change the stroke of the circle like so?

// EDIT

I have set up my circles like so:

var name1 = paper.circle(....);
name1.node.id = "name1";
name1.node.name = "Name";

var name2 = paper.circle(....);
name2.node.id = "name2";
name2.node.name = "Another Name";

And so on. Then I have combined them into a set:

nodes = paper.set();
nodes.push(name1, name2, name3, name4....);

I then use nodes.hover(function() { }); and nodes.click(function() { }); to define actions. The name.node.id is used for loading the right info page into a div while the name.node.name appears above the node when the user hovers over it.

I tried reorganizing my nodes as suggested:

var mapObjects = {};

mapObjects['name1'] = paper.circle(....);
mapObjects['name1'].node.id = "name1";
mapObjects['name1'].node.name = "Name";

mapObjects['name2'] = paper.circle(....);
mapObjects['name2'].node.id = "name1";
mapObjects['name2'].node.name = "Another Name";

I then tried to use the functions like I did before by simply changing nodes into mapObjects mapObjects.hover(function() { }); same with click. These didn’t work anymore! The hash technique worked tho so that’s a step to the right direction. How do I get my hover and click functions working now?

Answer 1

The eval would help, but it would be very vulnerable. The better way is to remember the circle in associative array:

var objects = {};
objects['mycircle'] = paper.circle(0, 0, 20).attr({stroke: "#ff0000"});
objects[hash].attr({stroke: "#0000ff"});