Adding a class name to path link possible?

[VeryNice]

Hi, I used the Australia map demo code to make new map for Canada.
Since the last update 1.24 it works great in both ie and firefox :)
Map is on my homepage and is currently listing cities in each province
via div id when clicked (like the demo).
I made a small modification to the map code, instead of onmouseover,
onmmousedown is used to get the click action.
Instead of using hidden divs to display the cities, my plan was to use
the htmlhttprequest from http://www.twinhelix.com/javascript/htmlhttprequest/
in order to load different external xhtml files for each province
clicked.
I know that a link and link title can be added in attr section and
that will work and take the user on the page linked.
What I would like is to pass the class="loadinto-targetArea" along
with the link in order to trigger the htmlhttprequest when province is
clicked on (this would load the external page inside a target div on
the same page where map is located instead of opening a new page).

Is this doable?
Thanx for any help and for this great javascript library!

[charles thomas]

Hi there Can we see the Map on your homepage? Very interesting I used iframes instead of ajax to get though security where I work (Ajax could not get through the firewall) For this humble map... http://www.irunmywebsite.com/raphael/worldmap.html I used inkscape to get the path simplified to assist loading time. Please include a link to this Canada map so I/we can look. Charles --- On Fri, 11/27/09, VeryNice <eln...@gmail.com> wrote:

Looking for the perfect gift? Give the gift of Flickr!

[VeryNice]

The homepage http://freejoblistings.ca , map is from wikipedia.
When you click on the map, the right panel loads from div that is
hidden on the page, just like the demo.
The links that show up on the right, when clicked use httphtmlrequest
to load the left panel div with content that is on separate page.
So basically I want to put the right panel content on separate page
also, and call it via the httphtmlrequest when map is clicked.

[charles thomas]

"VN" I don't think you can assign a class name to a Raphael object so you should attempt to use the 2nd of the third methods suggested at http://www.twinhelix.com/javascript/htmlhttprequest/demo/ <form action="content/calculator.php" method="post" onsubmit="docClickLoader.submitInto(this, 'resultArea', event)"> this call is the same one that happens implicitly with anchors given the class="loadinto-targetArea". You could create dummy forms as a work around maybe and get them activated by the mouseup as you have it. Charles

--- On Sat, 11/28/09, VeryNice <eln...@gmail.com> wrote:

From: VeryNice <eln...@gmail.com> Subject: Re: Adding a class name to path link possible? To: "Raphaël" <raph...@googlegroups.com>

[VeryNice]

Thank you for the tip, I will try to implement your solution.
Thanks

[VeryNice]

It is done!
Not adding the class name, but the workaround using the
htmlhttprequest for the map.
Thanks to Charles for pointing out to the solution.:

window.onload = function () {
var R = Raphael("paper", 330, 320);
var attr = {
fill: "#c0000f",
stroke: "#fff",
"stroke-width": 0.8,
"stroke-linejoin": "miter"
};
var canada = {};

canada.pei = R.path("M 289.4,272 C 286.6,271.8 283.9,271.2 281.1,270.6
C 280.1,270.6 280,270.2 280.6,268.9 C 281,268.1 281.4,267.6
281.6,267.6 C 282.6,268.2 283.5,269.1 284.5,269.4 C 286.6,269.2
288.7,268.2 290.9,268 C 290.7,268.9 290.4,269.8 290.2,270.7 C
290.2,271.7 289.8,272.3 289.4,272 z").attr(attr);

//PATH INFO FOR OTHER PROVINCES ALSO GO HERE, but have been left out
because it is a very long code.

var current = null;
for (var prov in canada) {
canada[prov].color = Raphael.getColor();
(function (st, prov) {
st[0].style.cursor = "pointer";
st[0].onmouseup = function () {
current && canada[current].animate({fill:
"#c0000f", stroke: "#fff"}, 500) && (docClickLoader.loadInto(current+'-
job-listings.html', 'targetArea'));
st.animate({fill: "#ffff38", stroke:
"#c0000f"}, 500);
st.toFront();
R.safari();
docClickLoader.loadInto(prov+'-job-
listings.html', 'targetArea');
current = prov;
};

})(canada[prov], prov);
}
};

For this to work you need to include latest version of raphael
(currently1.2.4) and htmlhttprequest.js codes need to be added
properly to your page. The external files you are calling need to end
with -job-listings.html (just kidding, you can change this as you
like), but they have to be named or begin with province name that you
used for naming the svg path. For example, the file this code would
load is named pei-job-listings.html
I post this code here, because it will be hard to see what is going on
on my website, since I plan to put all css and js code in external
files soon.
Thanks again, and good luck you all!