Coordonnées avec mouseover et mousemove
Bonjour,
Je suis nouveau sur ce forum, et il se peut que je ne respecte pas certaines règles (pas encore eu le temps de les regarder, je le ferai bientôt promis)
Brièvement, je maîtrise les bases en HTML et CSS, j'ai déjà touché également un peu au PHP et SQL pour le serveur apache, mais je débute totalement en javascript, et particulièrement avec la librairie JQuery.
Je n'ai pas encore suivi de "cours" structuré sur internet qui pourrait me permettre d'apprendre JS, pour le moment je me contente d'apprendre "sur le tas".
Ce que je souhaite réaliser :
J'ai une image "map", à laquelle j'ai défini des areas en "shape=rect" dans mon code HTML.
J'aimerais qu'au passage de la souris (mouseover) sur une de ces areas, une infobulle apparaisse, qu'elle suit le déplacement de la souris tant que l'on ne sort pas de l'area de la map.
J'ai bricolé un script javascript avec JQuery en m'inspirant de scripts proposés sur le net qui traitaient les infobulle, mais c'était un peu différent de mon cas.
Résultat actuel :
Quand je survole mon area, l'infobulle apparaît, elle se déplace lorsque je déplace ma souris, cependant quand je monte la souris vers le haut, la bulle va vers la gauche, quand je vais en bas, ça va à droite... bref une catastrophe, de plus la bulle est complètement déportée sur le côté. J'ai tenté d'inverser page.X et page.Y au sein de mes deux variables PosTop et PosLeft, ça me permet d'avoir la bulle "comme je le souhaite", elle suit correctement les déplacements de ma souris et elle n'est pas déportée, seulement il y a des bugs d'affichage, parfois ça scintille , et sur google chrome ça fait bugger le display:block (une "fonction" que j'ai réalisé sur mes areas lorsque je clique dessus un div apparait avec des infos dessus, mais ça n'a pas d'importance ici je pense)
voici le code JS:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| $(function(){
$('area').mouseover(function(){
$("body").append('<span class="BulleInfo"></span>');
var bulle= $(".BulleInfo");
bulle.append($(this).attr("alt"));
$('area').on( "mousemove", function( event ) {
var posTop = event.pageX;
var posLeft = event.pageY;
bulle.css({
left:posLeft,
top:posTop,
});
});
});
$('area').mouseout(function(){
$(".BulleInfo").remove();
});
}); |
Voilà, je vous remercie d'avance, si vous pouviez m'aider.
:oops:
