Ouvrir une fenêtre au passage de la souris sur une image

**debie1108** · 26/04/2007, 06h27

Bonjour,

Je voudrais faire exactement ce que j'ai mis en pièce jointe mais je suis débutante en Javascript et je ne sais pas comment faire...

J'explique : j'affiche toute une palette de couleurs.
Je voudrais que lorsque l'on passe la souris sur l'image, une espèce de fenetre s'ouvre avec une image de cette couleur plus grande, juste au dessus du pointeur de ma souris.

Je ne sais pas si c'est un rollover, une popup, ni même comment faire...
A part le onMouseOver dans lequel j'appellerai mon javascript je suis totalement perdue...

Pouvez-vous m'aider ?
Merci d'avance,
Deb

**SpaceFrog** · 26/04/2007, 08h37

regarde du coté d'infobulle ...

en fait un div en display:none que tu bascules en display:black sur le onmousover tu lui attribues un top et un left tu le colles en position absolute avec un z-index approprié...

Masi une simple recherche sur le forum t'aurai donné toutes ces informations, il doit même y avoir au moins une dizaine de code entre les contributions et la faq ...

**Auteur** · 26/04/2007, 11h09

Envoyé par SpaceFrog

regarde du coté d'infobulle ...

en fait un div en display:none que tu bascules en display:black sur le onmousover tu lui attribues un top et un left tu le colles en position absolute avec un z-index approprié...

petite correction :

Code :

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

1
2
 
display: block;

voici un petit script d'info-bulle

**SpaceFrog** · 26/04/2007, 11h22

Mouarf ! merci Auteur ...
Je broie du noir en moment

**debie1108** · 27/04/2007, 03h17

Merci beaucoup pour le lien, j'ai essayer et ca fonctionne.
Juste une petite chose que je ne sais pas faire... Ma fenêtre s'affiche en dessous de la vignette alors que je voudrais qu'elle s'affiche au-dessus, je ne sais pas comment faire...

Voici mon code :

Dans mon CSS

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
.bulle{
width: 197px;
position: absolute;
display: none;
z-index : 1;
background-color: #F4F49C;
padding: 2px;
margin: 2px;
border-style: ridge;
border-width: 1px;
border-color: #000000;
font-family: Arial;
font-size: 8pt;
}
 
.grandeBulle{
 height: 150px;
 overflow: auto;
}
 
.lien{
 cursor: pointer;
 color: #0000FF;
 font-weight: bold;
}

Dans mon fichier (c'est un template) :

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
<script type="text/javascript">
<!--
var idBulleT;
var chrono = null;
var delai = "50";
 
function afficheBulle(idBulle, parent)
{
  var bulle = document.getElementById(idBulle);
  var offset;
  var exp = new RegExp("^td_","gi");
 
  if (chrono!=null)
  {
     clearTimeout(chrono);
     cacheBulleT();
  }
 
  bulle.style.display = "block";
 
  if (exp.test(idBulle)==false)
  {
    if (parent.offsetLeft-bulle.offsetWidth<0)
       offset = 0;
    else
       offset = -bulle.offsetWidth;
 
    bulle.style.left = parent.offsetLeft+offset+"px";
  }
}
 
function cacheBulleT()
{
  document.getElementById(idBulleT).style.display = "none";
  chrono = null;
}
 
function cacheBulle(idBulle)
{
  idBulleT = idBulle;
  chrono = setTimeout("cacheBulleT()",delai);
 
  //document.getElementById(idBulle).style.display = "none";
}
 
function mouseOverBulle()
{
  clearTimeout(chrono);
  chrono = null;
}
 
function mouseOutBulle()
{
   chrono = setTimeout("cacheBulleT()",delai);
}
 
--></script>
 
<table align="left" cellspacing="5" cellpadding="0">
<tr>
<td align="center">
 
 <span class="lien" onmouseover="afficheBulle('td_{$o.option_name}', this)" onmouseout="cacheBulle('td_{$o.option_name}')"><img src="{$xcart_web_dir}/images/D/{$o.option_name}.jpg" width="33" height="16"/> </span>
        <div id="td_{$o.option_name}" class="bulle" onmouseover="mouseOverBulle()" onmouseout="mouseOutBulle()">
        <img src="{$xcart_web_dir}/images/D/{$o.option_name}.jpg" alt="feuille de style" width="197" height="139" /></div></td>

Pouvez-vous m'aider ?
Merci d'avance,
Deb

**SpaceFrog** · 27/04/2007, 08h52

ce qui détermine la position verticale c'est le top ....

**debie1108** · 27/04/2007, 11h16

Bonjour

,

J'ai essayé de mettre un top:10px pour essayer dans ma feuille CSS puis dans le code javascript mais il prend 10 px par rapport au bord de l'image et pas par rapport a l'endroit ou j'appelle le javascript. Résultat, l'agrandissement est tout en haut de mon écran....

Je ne peux pas mettre une valeur fixe car le tableau de couleur n'est pas positionner toujours au même endroit, c'est en fonction des lignes de textes situées juste avant, il peut être plus ou moins haut dans la page.

Une solution pour que l'agrandissement s'affiche juste au dessus de l'endroit ou je passe ma souris et déclenche l'appel au javascript ?

Merci
Deb

**SpaceFrog** · 27/04/2007, 11h19

-10em ....

**debie1108** · 29/04/2007, 04h28

Bonjour,

Encore une fois merci pour ta réponse mais... cela ne fonctionne pas.
En fait, c'est exactement pareil si je met 10 px ou 10 em, il me décale de 10px ou 10 em a partir du haut de la fenêtre...

Je ne peux pas fixer une valeur car l'apparition de mes couleurs n'est jamais ou même endroit dans la page.

Il doit bien exister une technique, un truc pour déplacer vers le haut l'info bulle en fonction de la position de la souris lors de l'appel au javascript ?

Merci pour votre aide,
Deb

**SpaceFrog** · 29/04/2007, 09h34

le moins devant je l'ai pas mis pour la décoration ...

**debie1108** · 29/04/2007, 14h59

J'entends bien SpaceFrog...

Excuse-moi j'aurais du préciser.
J'ai bien sûr essayé avec ta recommandation tout d'abord, en mettant top:-10em; dans ma feuille CSS, mais ca ne m'affiche plus rien quand je survol la vignette avec la souris... En fait, il doit mettre l'image 10 em au dessus de la bordure du haut, donc je ne vois rien. Si je met top:-0.1em, l'image est tout en haut de la fenetre, légèrement coupée...

C'est pour ça que j'ai ensuite essayé sans le -, et la, ca se comporte comme en px...

**debie1108** · 01/05/2007, 07h04

Bonjour,

Je reviens à la charge car mon problème n'est toujours pas résolu...

Merci d'avance.
DEb

**SpaceFrog** · 01/05/2007, 08h59

cela vient du calcul du offset du parent.
Certaines version de certains navigateurs ne calculent pas le offset par rapoort au 0,0 de la fenetre mais par rapport au 0,0 du parent, il faut donc boucler sur tous les parents por additionner les offset ...
Regarde dans la FAQ ou dans les contributions il y a une focnction de calcul offset...

**Auteur** · 01/05/2007, 12h23

Envoyé par SpaceFrog

cela vient du calcul du offset du parent.
Certaines version de certains navigateurs ne calculent pas le offset par rapoort au 0,0 de la fenetre mais par rapport au 0,0 du parent, il faut donc boucler sur tous les parents por additionner les offset ...
Regarde dans la FAQ ou dans les contributions il y a une focnction de calcul offset...

dans le code que je fournis, je ne fais aucun calcul par rapport au parent, sauf si la bulle est dans le tableau (et encore uniquement pour la coordonnée x)

@debie
dans la classe bulle remplace :

Code css :

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

1
2
 
margin: 2px;

par :

Code css :

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

1
2
3
4
5
margin-left: 2px;
margin-right: 2px;
margin-bottom: 2px;
margin-top: -150px;

Donne une valeur négative à margin-top. (en gros : margin-top = -height de la bulle).

Et normalement, pour IE et Firefox, tu n'as pas à te soucier des propriétés left et top de la bulle

**debie1108** · 02/05/2007, 05h11

Bonjour,

Ca marche parfaitement !

Merci beaucoup de votre aide.

Bonne journée,

Deb !

Ouvrir une fenêtre au passage de la souris sur une image

JavaScript

Discussions similaires

Partager

Partager