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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
| * Script bouton afficher/masquer texte sur la carte
*/
var oTexts = $("g text, g line");
$("#bouton_texte").on("click",function(){
var obj = $(this);
if( obj.text() === "Masquer le texte"){
obj.text("Afficher le texte");
oTexts.hide(); //Hide = cacher
}
else {
obj.text("Masquer le texte");
oTexts.show();
}
});
function afficheImage(id) {
$("#" + id).show();
}
function cacheImage(id) {
$("#" + id).hide();
}
function changeMessage(message, id, classe) {
$("#" + id).html(message).addClass(classe);
}
var oGroupes = $('g[data-description]');
/**
* tooltip sur la carte
*/
function svgTip() {
// style à appliquer si l'on ne passe pas par la classe
var opts = {
"display": "none",
"position": "absolute",
"top": 0,
"left": 0,
"padding": "1em",
"border": "1px solid red",
"font-size": "1em",
"color": "#000",
"background-color": "rgba(255,255,255,.8)",
"pointer-events": "none"
};
oGroupes.each(function(id, obj) {
var tt = $(this).data("description");
var that = $("<div class='svgtip'>" + tt + "</div>");
// action sur mouseover/out
$(this).hover(function(event) {
that.css({
'left': event.clientX,
'top': event.clientY + $(window).scrollTop()
});
that.addClass("active");
that.slideDown(150);
}, function() {
that.slideUp(150);
that.removeClass("active");
});
$(this).on("mousemove", function(event) {
if (that.hasClass("active")) {
that.css({
'left': event.clientX,
'top': event.clientY + $(window).scrollTop() - that.height()
});
}
});
$('body').append(that);
});
};
new svgTip();
/**
* Eléments <g> de la carte
* Affichage
* - mise en surbrillance lien de la liste
* - surbrillance <path> (géré via CSS:hover)
* - affichage de l'image
* - affichage du texte
*/
oGroupes.each(function(ind, elem) {
// récupération du <a> contenu
var oLien = elem.firstElementChild;
// récupération du numéro ID pour la liste
var index = oLien.id.replace("region-", "");
// récupération des ID pour image et texte
var idImage = $(oLien).data("img");
var idTexte = $(oLien).data("txt");
// action sur mouseover/out
$(this).hover(function() {
// ajout classe sur lien de la liste
$("#list-" + index).addClass("is-active");
// affiche image et texte
afficheImage(idImage);
changeMessage(idTexte, "ejs_texte");
}, function() {
// supprime classe sur lien de la liste
$("#list-" + index).removeClass("is-active");
// masque image et texte
cacheImage(idImage);
changeMessage("", "ejs_texte");
});
});
/**
* Liens de la liste
* Affichage des différents éléments au survol des liens de la liste
* - mise en surbrillance lien survolé
* - surbrillance <path>
* - affichage de l'image
* - affichage du texte
*/
$("a[id^='list-']").each(function(ind, elem) {
// récupération du numéro ID
var index = elem.id.replace("list-", "");
// récupération des ID pour image et texte
var idImage = $(this).data("img");
var idTexte = $(this).data("txt");
// action sur mouseover/out
$(this).hover(function() {
$("#list-" + index).addClass("is-active");
$("#region-" + index).addClass("is-active");
// affiche image et texte
afficheImage(idImage);
changeMessage(idTexte, "ejs_texte");
}, function() {
$("#list-" + index).removeClass("is-active");
$("#region-" + index).removeClass("is-active");
// masque image et texte
cacheImage(idImage);
changeMessage("", "ejs_texte");
});
}); |
