Discussion :

[brasco06]

Bonjour,

j'ai 3 images l'une a côté de l'autre.
Je voudrais afficher en grand chaque image au survol de la souris.

j'ai fais quelques test mais ca ne marche pas corretement.

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
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
64
65
66
67
68
69
70
71
72
73
 
 function getPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX + 
            (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + 
            (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    return cursor;
}
var timer=0;
var current;
function ShowToolTip(ev,deltaX,deltaY,image)
{
var Xdoc, Xfen, Ydoc, Yfen, htDiv, lgDiv, dX, dY;
  var Ybulle;
  var el=document.getElementById("Tip");
 
  //on affiche la boite de dialogue pour evaluer ses dimensions.
 
  //height and width of the tooltip
  htDiv = el.offsetHeight;
  lgDiv = el.offsetWidth;
 
  //delta of the tooltip under the curser
  dY=deltaY;
  dX=deltaX;
 
 ie = document.all; 
 var cursor = getPosition(ev);
 
 if(ie){
		Xfen = event.x;
		Yfen = event.y;
		Xdoc = cursor.x;
		Ydoc = cursor.y;
		//window.status = x;
	}else{
		Xfen = ev.pageX;
		Yfen = ev.pageY;
		Xdoc = cursor.x;
		Ydoc = cursor.y;
 }
 
    el.style.left = Xdoc + dX +"px";
el.style.top = Ydoc + dY-5+"px";
 
 
  //tooltip content :
 
  el.innerHTML = "<img src='"+image+"' width='500' heigth='500' />";
 
 
 
  if (el.style.display!="inline")
      el.style.display="inline";
    current=lname;
 
} 
 
function HideToolTip()
{
 //hide the tooltip 
 document.getElementById("Tip").style.display = "none";
}

Code html

Code :

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

1
2
3
4
5
6
 <tr >
                    <td align="left"><img width="200" height="200" src="images/plan/plan_siege.png" onmousemove="javascript:ShowToolTip(event,20,-200,'images/plan/plan_siege.png')" onmouseout="javascript:HideToolTip()"/> </td>
                    <td align="left"><img width="200" height="200" src="images/plan/Plan2.png" oonmousemove="javascript:ShowToolTip(event,20,20,'images/plan/Plan2.png')" onmouseout="javascript:HideToolTip()"/> </td>
                   <td align="left"><img width="200" height="200" src="images/plan/plan_magnan.jpg" onmousemove="javascript:ShowToolTip(event,-600,-200,'images/plan/plan_magnan.jpg')" onmouseout="javascript:HideToolTip()"/> </td>
 
                </tr>

En bas de ma page html, code avec la bulle cachée au départ

Code :

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

<div class="tooltip" id="Tip">ToolTip</div>

La premiere iùage s'affiche en grand correctement, la 2eme pas du tout et la 3eme clignotte sans s'arreter!

Merci de m'aider!!

[Auteur]

bonjour,

le gros problème du script de l'info-bulle est justement la position de la bulle. Les navigateurs n'utilisent pas les mêmes méthodes qui nous permet de définir les coordonnées d'un élément dans la page.

Et je pense que ton problème est à ce niveau : je pense que ton image deux ne s'affiche pas à cause des valeurs que tu donnes à deltaX et deltaY.

Autre remarque : la variable lname de la fonction ShowToolTip() n'est pas définie.


Un petite variante ici (et dans ce cas pas besoin de définir la position du div) :
http://www.developpez.net/forums/sho...36#post1637436

[brasco06]

merci mais j'ai justement besoin de definir la position de la bulle.
voici le lien en ligne:
http://www.kyriellle.com/acces_club.php

le probleme est qu'il faut que je fasse afficher une fois la photo a gauche de l'image et une fois à droite

[brasco06]

aucune idée?

[Auteur]

aucune idée?

non pas trop

Mais ce que tu peux faire :

• utiliser onmouseover() au lieu de onmousemove() : compte-tenu de la taille des images à afficher, il n'est pas nécessaire que l'image agrandie suivent la souris.
• supprimer le terme javascript qui vient juste après les événements, c'est sans intéret, cela peut provoquer des erreurs d'exécution :
  

  Code html :

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

  1
  2
   
  onmouseover="javascript:ShowToolTip(....)" onmouseout="javascript:HideToolTip()"

• fixer la postion de la div contenant l'image. Cela évitera de la calculer par rapport à la position de la souris d'une part, et d'autre part évitera des delta de 200 ou 500 px par rapport à la souris.
• supprimer de la fonction ShowToolTip() les variables htDiv et lgDiv que tu n'utilises pas. Sinon fixe les à 0.

[brasco06]

en fesant ca le probleme est que lorsque la souris passe par dessus l'image agrandie, cette derniere clignote, c'est peeut etre un probleme de focus?

[Auteur]

en fesant ca le probleme est que lorsque la souris passe par dessus l'image agrandie, cette derniere clignote, c'est peeut etre un probleme de focus?

non c'est un problème de over et out :

Tu passes sur ta miniature : onmousover est validé, tu affiches donc l'agrandissement.
La souris se trouve sur l'agrandissement donc l'événement onmouseout sur ta miniature se déclenche, l'image agrandie se referme.
Ta souris n'a pas bougée et lors de la fermeture, elle se retrouve sur la miniature donc l'événement onmouseover se déclenche, et on repart pour un tour...

D'où l'intéret du décalage entre la souris et l'info bulle. Le problème dans ton cas est que la bulle est relativement grande (500px par 200px) ce qui laisse peu de place à l'affichage. C'est pour cette raison que je te proposait un emplacement fixe.

[SpaceFrog]

place l'info bulle en em par rapport à this passé en paramètre ...

[brasco06]

serait-il possible d'avoir une petite aide SpaceFrog?

sinon pour l'emplacement fixe je veut bien, mais je ne veux pas qu'elle s'affiche en bas des 3 photos.
Il n'ya pas assez de palce pour la faire afficher en position fixe, c'est pour ca que je voulais faire comme ca, j'ai vu sur un site ca marchait donc c'est fesable!!

[SpaceFrog]

arf pour les em c'est pour une infobulle en css ...

voici une proposition...
suffit d'ajuster avec quelques pixels ou la hauteur et la largeur de l'infobulle ...

Code :

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

onmouseover="javascript:ShowToolTip(.....,this)"

puis dans le script

Code :

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

1
2
3
 
moninfobulle.style.top=objbulle.offsetTop
moninfobulle.styel.right=objbulle.offsetright