Bonjour,
Je suis toute nouvelle sur le forum et très, TRES débutante en matière de codage alors je m'excuse si la question a déjà été posée ... Voici mon problème :
J'ai suivi un tuto pour créer une carte interactive, avec un tooltip indiquant le nom des différentes régions au survol des différentes areas par la souris. Jusqu'ici, tout va bien.
Seulement, ça se complique à partir du moment où j'aimerais personnaliser ce tooltip. Mon projet est clair, j'aimerais que mon tooltip change de forme au survol pour ressembler à l'exemple ci-contre :
Je ne sais pas si c'est possible mais si oui, je sais encore moins comment m'y prendre. J'avais pensé à intégrer une image dans mon tooltip mais je n'ai pas trouvé comment faire ... Peut-être aussi qu'il existe un manière plus simple de réaliser mon projet.
Dans tous les cas, j'ai besoin d'aide et je remercie d'avance toute personne qui voudra bien m'accorder un peu de son temps pour me guider.
Voici le code html utilisé :
Et le css :
Voilà, je crois que j'ai tout dit/mis. Encore merci à quiconque voudra bien m'aider !
Je suis toute nouvelle sur le forum et très, TRES débutante en matière de codage alors je m'excuse si la question a déjà été posée ... Voici mon problème :
J'ai suivi un tuto pour créer une carte interactive, avec un tooltip indiquant le nom des différentes régions au survol des différentes areas par la souris. Jusqu'ici, tout va bien.
Seulement, ça se complique à partir du moment où j'aimerais personnaliser ce tooltip. Mon projet est clair, j'aimerais que mon tooltip change de forme au survol pour ressembler à l'exemple ci-contre :
Je ne sais pas si c'est possible mais si oui, je sais encore moins comment m'y prendre. J'avais pensé à intégrer une image dans mon tooltip mais je n'ai pas trouvé comment faire ... Peut-être aussi qu'il existe un manière plus simple de réaliser mon projet.
Dans tous les cas, j'ai besoin d'aide et je remercie d'avance toute personne qui voudra bien m'accorder un peu de son temps pour me guider.
Voici le code html utilisé :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Carte du Rhaëg</title>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.map').append('<div class="overlay">').append('<div class="tooltip">Salut les gens</div>')
$('.map .tooltip').hide();
var regions=[
{name:'Orën',slug:'oren'},
{name:'Qahra',slug:'qahra'},
{name:'Ssyl Shar',slug:'ssyl-shar'},
{name:'Ys',slug:'ys'},
{name:'Vaendark',slug:'vaendark'},
{name:'Undòmë',slug:'undome'},
{name:'Tol Orëa',slug:'tol-orea'}
];
//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 passe sur une région
$('.map area').mouseover(function(){
var index = $(this).index();
var left = -index * 1100 - 1100;
$('.map .tooltip').html(regions[index].name).stop().fadeTo(500,1);
$('.map .overlay').css({
backgroundPosition : left+"px 0px"
});
});
//On sort de la map
$('.map').mouseout(function(){
$('.map .overlay').css({
backgroundPosition : "1100px 0px"
});
$('.map .tooltip').stop().fadeTo(500,0);
});
});
</script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="map">
<img src="void.png" width="1100" height="800" usemap="#Map" id="mon_image" />
<map name="Map">
<area shape="poly" coords="184,220,177,196,184,182,212,187,261,143,280,159,301,153,325,127,378,119,440,133,449,163,437,175,458,183,463,201,490,199,488,218,479,220,465,237,440,299,416,303,385,321,354,316,367,339,347,348,309,346,291,360,266,384,246,384,242,373,249,348,236,336,248,322,227,301,207,269,184,254,184,229" href=""/>
<area shape="poly" coords="237,385,258,386,275,387,287,393,301,385,309,373,322,374,336,383,352,382,375,363,393,359,393,351,417,335,442,365,432,375,426,389,403,399,414,404,432,400,473,410,476,421,496,426,491,438,462,440,456,430,425,438,383,440,316,442,297,438,295,431,286,431,281,445,265,449,255,443,254,435,233,438,213,427,218,414,206,410,219,397,230,387" href="" />
<area shape="poly" coords="263,456,338,456,367,452,386,475,359,517,350,515,353,531,398,567,455,584,472,582,473,568,525,570,537,585,555,590,530,609,513,618,496,617,489,607,453,623,421,628,407,614,384,617,376,632,338,638,311,629,274,635,254,633,238,602,237,582,229,554,203,549,217,531,208,503,233,483,241,459" href="" />
<area shape="poly" coords="569,416,556,367,584,290,648,293,692,318,705,350,688,398,655,424,614,430,589,422" href="" />
<area shape="poly" coords="779,318,814,311,804,281,857,264,862,272,894,266,942,244,956,232,982,187,1001,191,1007,180,1011,139,1011,101,993,107,978,110,965,87,948,98,928,111,882,95,852,98,838,112,804,122,792,97,747,92,719,103,698,98,654,116,633,134,605,136,559,130,538,136,523,161,546,175,580,185,606,196,621,184,640,185,665,157,695,163,690,191,709,209,675,219,660,265,687,277,724,282,731,275,746,288,761,290,773,301,782,313" href="" />
<area shape="poly" coords="785,318,809,313,854,337,894,345,903,327,936,337,942,337,974,354,982,380,987,425,992,472,969,514,924,543,898,522,858,504,836,489,794,479,777,490,744,493,715,474,726,454,723,435,736,431,729,411,753,384,768,365,785,371,812,343,804,332" href="" />
<area shape="poly" coords="710,516,748,524,763,537,799,531,822,536,840,562,833,586,811,582,809,587,813,594,774,631,745,659,688,676,662,680,643,676,625,675,609,657,624,627,643,601,665,585,687,538,701,520" href="" />
</map>
</div>
</body>
</html>
Et le css :
.map{
width: 1100px;
height: 800px;
background: url(map.png) left top no-repeat;
position: relative;
}
.map .overlay{
width: 1100px;
height: 800px;
background: url(map.png) 1100px top no-repeat;
position: absolute;
top:0;
left:0;
z-index: 1;
}
.map img{
position: absolute;
top:0;
left:0;
z-index: 2;
}
.map .tooltip{
position: absolute;
border-radius: 5px;
color: #FFF;
background: #000;
padding: 0 10px;
display: inline;
top: 0;
left: 0;
z-index: 3;
text-align: center;
}
Voilà, je crois que j'ai tout dit/mis. Encore merci à quiconque voudra bien m'aider !
