Raphaël + FrancyBox

Bonjour,

J'utilise une carte de la France via la library Raphaël, la carte fonctionne très bien par contre au lieu d'être redirigé vers une nouvelle page j'aimerais qu'elle s'ouvre dans une fenêtre pop.

Voici mon script Raphaël :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_france'), 587.5, 550);
 
// Les styles visuels pour toutes les rÃ©gions
var attr = {
fill: "#e5e5e5", /* Couleur de remplissage par defaut */
stroke: "#959595", /* Couleur des bordures par defaut */
"stroke-width": 1,
"stroke-linejoin": "round"
};
 
var region = {};
region.alsace = paper.path("M 480.71875,112.28125 L 477,113.3125 L 475.28125,116.3125 L 475.28125,119.25 L 473.71875,120.625 L 472.34375,120.625 L 469.8125,118.84375 L 467.84375,120.21875 L 465.5,120.21875 L 463.5625,118.28125 L 459.84375,117.6875 L 457.6875,116.71875 L 456.90625,113.78125 L 455.15625,115.71875 L 454.1875,120.21875 L 451.625,121 L 451.625,123.53125 L 454.1875,124.71875 L 456.125,126.09375 L 455.34375,127.84375 L 457.125,129 L 460.25,126.65625 L 465.6875,129.78125 L 463.375,134.09375 L 463.5625,135.46875 L 465.125,137.03125 L 463.9375,141.125 L 460.03125,145.03125 L 457.875,144.84375 L 459.25,146.1875 L 458.46875,149.71875 L 459.25,155 L 462.96875,155.96875 L 460.8125,160.84375 L 458.46875,165.53125 L 459.0625,168.46875 L 457.125,172.96875 L 453.78125,175.875 L 453.59375,183.5 L 451.15625,185.59375 L 451.25,185.65625 L 452.03125,187.21875 L 455.15625,187.40625 L 458.6875,190.15625 L 459.25,191.5 L 459.0625,193.84375 L 458.09375,195.625 L 458.46875,197.96875 L 461.21875,197.5625 L 461.8125,199.71875 L 462.78125,203.875 L 465.09375,203.5 L 464.6875,205.625 L 466.0625,206.8125 L 473.28125,206.625 L 477,203.6875 L 477.1875,199.375 L 479.15625,196.84375 L 476.59375,193.90625 L 475.25,190.78125 L 476.8125,188.65625 L 476.8125,183.75 L 477.78125,181.40625 L 477.78125,177.5 L 479.53125,174.96875 L 477.59375,172.25 L 477.375,166 L 482.46875,156.03125 L 481.875,150.375 L 484.21875,142.75 L 484.8125,136.09375 L 489.875,132.40625 L 489.875,130.0625 L 491.84375,127.5 L 493.40625,127.5 L 495.15625,125.75 L 494.78125,122.4375 L 496.53125,117.75 L 499.25,117.15625 L 496.53125,115 L 491.65625,114.4375 L 487.34375,112.28125 L 484.40625,114.03125 L 482.84375,112.28125 L 480.71875,112.28125 z").attr(attr);
region.alsace.attr({title: 'Alsace',href:"http://fancyapps.com/fancybox/demo/ajax.txt", "data-fancybox-type":"iframe", "class":"various"});
 
 
var current = null;
for (var state in region) {
	region[state].color = "#c6d2ec"; /* Couleur de remplissage au rollover */
	(function (st, state) {
	st[0].style.cursor = "pointer";
 
	st[0].onmouseover = function () {
	st.animate({fill: st.color}, 100);
	paper.safari();
	};
 
	st[0].onmouseout = function () {
		st.animate({fill: "#e5e5e5"}, 300);
		paper.safari();
	};
 
	})(region[state], state);
}
 
}

Le code HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
	<title>Forum jQuery</title>
<style>
 
 
</style>
 
</head>
<body>
 
<div id="canvas_france"></div> <!-- carte de la france raphael.js -->
 
<div> <a class="various" data-fancybox-type="iframe" href="http://fancyapps.com/fancybox/demo/ajax.txt">Ajax</a></div> <!--test du script -->
 
<link rel="stylesheet" type="text/css" href="http://www.tandem-sante.com/skin/frontend/tandem/default/css/jquery.fancybox.css" media="all" />
<script type="text/javascript" src="http://www.tandem-sante.com/skin/frontend/tandem/default/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="http://www.tandem-sante.com/skin/frontend/tandem/default/js/jquery.fancybox.js"></script>
 
<script type="text/javascript">// <![CDATA[
jQuery.noConflict ();
	jQuery(document).ready(function() {
	jQuery(".various").fancybox({
		maxWidth	: 800,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});
// ]]></script>
 
 
 
 
</body>  
</html>

Je pense que mes class sur la carte sont pas prise en compte...

J'ai regardé pour appelé un attribue au lieu d'une class pour ma fonction mais j'y arrive pas...

Je suis débutant en javascript,

Merci pour votre aide :)