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
| ma_fonction(){
$('.map').append('<div class="overlay">').append('<div class="tooltip">Salut les gens</div>')
$('.map .tooltip').hide();
var regions = [
{name : 'Corse', slug: 'corse'},
{name : 'PACA', slug: 'provence-alpes-cote-d-azur'},
{name : 'Rhône-Alpes', slug:'rhones-alpes'},
{name : 'Languedoc Roussillon', slug : 'languedoc-roussillon'},
{name : 'Midi Pyrénées', slug : 'midi-pyrenees'},
{name : 'Limousin', slug : 'limousin'},
{name : 'Alsace', slug: 'alsace'},
{name : 'Aquitaine', slug:'aquitaine'},
{name : 'Auvergne', slug:'auvergne'},
{name : 'Bourgogne', slug:'bourgogne'},
{name : 'Bretagne', slug:'bretagne'},
{name : 'Basse Normandie', slug:'basse-normandie'},
{name : 'Centre', slug: 'centre'},
{name : 'Champagne Ardenne', slug : 'champagne-ardenne'},
{name : 'Haute Normandie', slug : 'haute-normandie'},
{name : 'Franche Comté', slug : 'franche-comte'},
{name : 'Ile de france', slug : 'ile-de-france'},
{name : 'Lorraine', slug : 'lorraine'},
{name : 'Nord pas de Calais', slug: 'nord-pas-de-calais'},
{name : 'Pays de la loire', slug: 'pays-de-la-loire'},
{name : 'Picardie', slug : 'picardie'},
{name : 'Poitou Charente', slug: 'poitou-charente'},
{name : 'Martinique', slug: 'martinique'},
{name : 'Réunion', slug: 'reunion'},
{name : 'Guadeloupe', slug: 'guadeloupe' }
];
// Tooltip qui suit la souris
$(document).mousemove(function(e){
$('.map .tooltip').css({
top:e.pageY-$('.map .tooltip').height()-20,
left:e.pageX-$('.map .tooltip').width()/2-10
});
});
// On met les liens sur les aréa
$('.map area').each(function(){
var index = $(this).index();
$(this).attr('href','http://google.com/?q='+regions[index].slug);
});
// On passe sur une région
$('.map area').mouseover(function(){
var index = $(this).index();
var left = -index * 346 - 346;
$('.map .tooltip').html(regions[index].name).stop().fadeTo(500,0.6);
$('.map .overlay').css({
backgroundPosition : left+"px 0px"
});
});
// On sort de la map
$('.map').mouseout(function(){
$('.map .overlay').css({
backgroundPosition : "346px 0px"
});
$('.map .tooltip').stop().fadeTo(500,0);
});
}); |
