Discussion :

[conan76]

Bonjour,

Dans le cadre d'un développement sous Visual studio, je dois faire appel lors du passage sur une image "info" à l'apparition d'une légende représenté dans un div.

pour plus de commodité je voudrais que mon div ne s'affiche pas en dehors de ma zone de vision du navigateur par exemple quand l'image se trouve à proximité d'un bord du navigateur.

J'ai tenté de le faire mais sans succès. Je ne doit pas utiliser de librairie javascript, donc du javascript pur.

L'application étant sur un intranet, le parc informatique est sous internet explorer (je le signal car j'ai tenté d'utiliser event.PageX).

Merci de votre aide. ci dessous ma fonction actuelle.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function setVisibility(id, visibility) {
    var d = document.getElementById(id);
    var marge = 5;
    d.style.display = visibility;
    var mouseX = event.clientX;
    var mouseY = event.clientY;
    var div_width =  parseInt(d.style.width);
    var div_height =  parseInt(d.style.height);
    var posLeft = 0;
    var posTop = 0;
 
    if (mouseX>div_width)
        posLeft  = mouseX - div_width - marge;
    else
        posLeft  = mouseX + marge;
 
    if (mouseY>div_height)
        posTop = mouseY - div_height - marge;
    else
        posTop = mouseY + marge;
 
    d.style.left = posLeft + 'px' ;
    d.style.top = posTop + 'px';
}

[SpaceFrog]

l'élément est il en position absolute ?

[conan76]

l'élément est il en position absolute ?

Oui, c'est pourquoi je travail sur le left et top.
le tout s'affiche bien, en fait je ne sais pas comment placer le div (à côté du bouton survolé, d'où l'utilisation de la position de ma souris à ce moment là) pour que celui ci n'est pas de left à -10px ou dépassant le navigateur, idem pour le top.

[SpaceFrog]

pourquoi ne recupères tu pas simplement le offset top et left du bouton ?

[conan76]

pourquoi ne recupères tu pas simplement le offset top et left du bouton ?

Simplement parce que via mon code sous visual studio (Vb.net, ci dessous) je veux éviter de passer pleins d'arguments. J'ai naturellement la position quand la souris fait un mouseover dans le javascript.

Code :

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

1
2
3
4
5
6
 Private Sub survolInfoLegende()
        pLegende.Style.Add("display", "none")
 
        iLegende.Attributes.Add("onMouseOver", "setVisibility('pLegende','inline')")
        iLegende.Attributes.Add("onMouseOut", "setVisibility('pLegende','none')")
    End Sub

[SpaceFrog]

ça n'ajouterait aucun argument ...
tu passes déja l'id ...

[conan76]

ça n'ajouterait aucun argument ...
tu passes déja l'id ...

??

cf code précédent.

L'image que je survol s'appelle : iLegende (côté Visual Studio, à la génération HTML le nom peut changer, je ne vais pas rentrer dans les détails, c'est simplement en fonction du contexte de l'image)

j'ai ajouté 2 évènements javascript OnMouseOver et OnMouseOut pour indiquer quel action doit être faite, en l'occurence rendre visible le "panel" div nommé pLegende. C'est donc pLegende que je passe en paramètre (mon id) et non l'image/bouton