Discussion :

[thais781]

Bonjour,

Juste un petit soucis surement simple pour vous ..... mais moins pour une débutante comme moi ....

J'ai une carte avec des area, je voudrais que lorsque l'on survole la zone je puisse afficher un texte avec une petite image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function afficheId(baliseId)
{
    alert(baliseId)
}
function cacheId(baliseId)
{
....
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<center><img src="Data/Mytho.png" style="border:0" usemap="#Map"></center>
<map name="Map">
	<area shape="rect" href="debut.html" coords="0,0,200,200" onMouseOver="afficheId('bonjour');" onMouseOut="cacheId('bloc')">
</map>

Pour l'instant j'arrive juste a afficher un 'alert' au passage de la souris, mais pas de bulle ....

Une idée ?

Thais

[Lorenzo77]

salut,

la fonction alert n'a rien a voir avec une bulle d'aide !
commence par définir un DIV qui représente ta bulle, cache le et lors du mouseover, affiche le et positionne le sur la souris

[thais781]

Salut,

merci pour ton aide.
Je sais pour le alert, c'etait juste pour valider que quand je passe ma souris, je rentre bien dans la finction afficheId

Mais mon soucis est que je ne sais pas comment dans la fonction javascript faire l'affichage de la bulle ....

Thais

[NoSmoking]

Bonjour,
au moins 3 millions* de posts en parlent

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
oElem.style.display =' block'; // affiche l'élément
oElem.style.display = 'none';  // masque l'élément

*chiffre donné par les organisateurs, mais bien moins d'après les forces de l'ordre

[Lorenzo77]

c'est pas les sources qui manquent !

http://javascript.developpez.com/tut...t-avec-jquery/

[NoSmoking]

on peut également le faire en CSS, l’artillerie légère dans ce cas

[thais781]

Bonjour,

J'ai effectivement regardé plusieur post, mais mon soucis est de cumulé les 2 fonctions qui séparément marche nickel :

AREA et les bulles
:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

Each <a rel="tooltip" title="A paragraph or idea accompanied by <b>supporting details</b>">paragraph</a> <br>

et

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<map name="Map">
   <area shape="rect" href="Fiches.html" coords="127,156,202,200" >
</map>

Un peu comme sur le site de Météo France http://france.meteofrance.com/france/accueil

Thais

[Lorenzo77]

tu pourrais utiliser "title" -> juste pour le texte !

sinon ajoute des mouseover/move/out pour déclencher l'affichage/placement/cache de ton DIV infobulle (comme dans ton 1er test avec Alert)

[thais781]

C'était ma logique mais je ne sais pas comment on n'affiche une bulle avec du texte et une image dans la fonction AfficheId de mon Javascript ....

Une idée ...

Merci

Thais

[Lorenzo77]

commence par creer le DIV représentant la bulle !
ajoute lui ces CSS :
position: absolute; display: none;

ensuite :
mouseover -> display: block
mouseout -> display: none
mousemove -> tu recup la position de la souris et tu l'assignes a ton DIV
avec jQuery le code ressemblera a ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#infobulle').css({left: e.pageX + 10, top: e.pageY - $('#infobulle').outerHeight()});

en JS pur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
          infobulle.style.left = window.event.x + document.body.scrollLeft;
          infobulle.style.top = window.event.y + document.body.scrollTop;

tu as tous les blocs, a toi de chercher un peu