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);
});
}); |
Partager