(Résolu) Compteur de clic en php sur un élement path SVG

Bonjour à tous,

J'ai un ptit souci pour réaliser un compteur de clic.
J'ai une carte de France faites en Svg ou lorsqu'on clic sur une région, une fancybox avec un contenu inline s'ouvre.

Ma question est : est-il possible de compter le nombre de clics (en php msql) fait sur un élement path (svg) .
Voici mon code :

window.onload = function() {
var w = 1000;
var h = 1000;
var paper = new Raphael(document.getElementById('canvas_france'));
paper.setViewBox(0,0,w,h,true);
paper.setSize('100%', '20%');
   

var $$j = jQuery.noConflict();  
var gr = {};

gr.departement51 = paper.path("M 337.375,99.3125 L 335.03125,100.3125 L 335.4375,102.25 L 331.3125,102.25 L 327.625,105 L 327.625,110.25 L 330.34375,112.03125 L 331.125,113.78125 L 326.625,114.15625 L 326.0625,115.9375 L 327.8125,117.09375 L 327.03125,118.28125 L 325.28125,119.0625 L 325.65625,120.40625 L 328.1875,120.40625 L 329.1875,121.78125 L 327.4375,122.96875 L 325.875,127.0625 L 322.9375,128.4375 L 321.9375,130.5625 L 320.96875,131.75 L 321.1875,132.90625 L 319.625,133.90625 L 319.21875,136.625 L 320.78125,137.59375 L 321.5625,140.53125 L 320.59375,142.28125 L 321.1875,143.65625 L 324.09375,143.46875 L 324.09375,144.4375 L 324.9375,144.25 L 328.3125,147.8125 L 333.0625,147.03125 L 338.625,143.25 L 341.96875,143.25 L 345.34375,140.875 L 349.3125,138.6875 L 352.28125,138.90625 L 352.6875,142.875 L 356.25,148.21875 L 360.21875,148.21875 L 365.78125,147.03125 L 369.75,148.40625 L 373.90625,145.4375 L 374.5,140.5 L 379.09375,139.71875 L 379,136.625 L 375.28125,133.6875 L 374.875,132.125 L 376.25,129.78125 L 375.0625,128.8125 L 376.25,125.875 L 378.40625,124.90625 L 379.96875,120.03125 L 376.84375,120.21875 L 378.59375,118.28125 L 377.21875,113.96875 L 375.875,111.03125 L 377.625,109.46875 L 376.625,109.28125 L 376.375,107.9375 C 376.33461,107.94351 376.09375,107.96875 376.09375,107.96875 L 374.3125,106.375 L 372.3125,108.375 L 371.71875,108.375 L 370.9375,107.375 L 366.1875,107.1875 L 365.375,108.375 L 364,108.375 L 362.8125,105.78125 L 360.21875,105.78125 L 359.625,106.375 L 357.0625,106.1875 L 353.875,103.8125 L 351.6875,103.21875 L 350.90625,102.03125 L 346.75,99.4375 L 342,99.3125 L 342.0625,101.09375 L 340.6875,101.46875 L 337.375,99.3125 z ").attr({fill: "#E05C28",stroke: "white"});
 
 
 var current = null;
 
   for (var state in gr) 
   {
	 	       	var dep=state.slice(11);
var num_dep=paper.text(gr[state].getBBox().x + (gr[state].getBBox().width -
(gr[state].getBBox().width/2)), gr[state].getBBox().y + (gr[state].getBBox().height -
(gr[state].getBBox().height/2)), dep).scale(1.5, 1.5,0,0);
num_dep.attr({'font-weight' : "normal ", 'font-size': 7, fill:"black " , 'font-family': "Arial "});
		gr[state].click(function(){$$j.fancybox({
            
			'showCloseButton': true,
			'href'          : '#element' ,
                         'autoScale'     : true,
                    'openEffect'  : 'elastic',
    		'closeEffect' : 'elastic',
            
			'helpers' : {
        'overlay' : {
            'opacity': 0.5,
            'css' : {
                'background-color' : '#000'
				
            }
        }
    }
        });
 }); 
		 gr[state].scale(1.5, 1.5,0,0);
	     gr[state].color = "white";
	       (function (state) {
	           state[0].style.cursor = "pointer";
	           state[0].onmouseover = function () {
	                  state.attr({fill: 'white', stroke: "#9D9D9D"});
	               paper.safari();
	               
	           };
	           state[0].onmouseout = function () {
	        	   
	               state.attr({fill: '#E05C28', stroke: "white"});
	               paper.safari();
	           };
		    	
		    


	       })(gr[state], state);
	     
   	}

Modifié par shimu (05 Feb 2014 - 15:17)

Salut,

Exemple même du mauvais JS. Tel que tu l'as écrit, tu devras faire de l'Ajax puisque tu insères des éléments à la volée. .

Pourquoi n'écris tu pas en dure le SVG ? Parce que IE8 ? Mauvaise approche du problème ! Pour toutes les versions ultérieures à IE8, tu écris du svg. Pour IE8 et les versions antérieurs, un map area fait avec GIMP par exemple (il existe d'autres tutos sur le net). Tu écris "tout en dur" et tu n'as plus qu'à créer de bons vieux links pour ton compteur. C'est un peu plus long à mettre en place, mais c'est plus simple et largement mieux.

Bien que le Javascript va être un grand langage, le connaître c'est bien, mais ce n'est pas du tout la solution ultime (loin de là).

Au passage, si tu veux animer le map area lors du passage ou clique de la souris, il y a des techniques pour ça. Si tu veux savoir le faire, dans ce cas pose ta question sur le forum en ouvrant le sujet.
Modifié par niuxe (04 Feb 2014 - 16:02)

shimu a écrit :
Merci de ta réponse. Malheureusement je suis une quiche en Ajax. Javascript je me débrouille et php ca va .J'aimerais surtout que ce nombre de clic se mette dans ma base de donnée.
pour faire des stats sur le nombre de personne qui clic sur tel ou tel région.

Ouais j'y ai pensé en dur des svg mais c'était pour savoir si y'avait moyen de le faire comme ca.
Je voulais passé en dur qu'en dernier recours.

Attention, je viens de rééditer mon message précédent. Relis le. Je te conseille vraiment d'écrire en dur le svg et si tu veux une compatibilité avec IE8, lis mon message précédent.

Là en le faisant en JS, tu plantes l'accessibilité et le référencement.

Thanks niuxe je vais tester aujourd'hui voir ce que ça donne.
Mais y'a un truc que je comprend pas. J'ai fait un bete compteur en php mais ce que j'aimerais qu'il comptabilise c'est le clique sur le path et non un lien . est ce que je dois donné un id à mon path et à ce moment la faire un lien du type : counter.php?page="id-du-path" ??


ps: autre probleme !! ca semble marché mais mnt je n'arrive pas à loader ma fancybox avec mon svg.

<a class="fancybox" xlink:href="#id01"> <path stroke-width="0.6666666666666666" transform="matrix(1.5,0,0,1.5,0,0)" d="M337.375,99.etc....." ></path></a>

<a class="fancybox" href="#id01"> test</a>

Par contre elle se load parfaitement avec du text mais pas sur le path
please help
Modifié par shimu (05 Feb 2014 - 10:04)