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

Version imprimable

26/04/2007, 06h27
debie1108

1 pièce(s) jointe(s)

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

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
26/04/2007, 08h37
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é...

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 ...
26/04/2007, 11h09
Auteur
Citation:

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:

1 2 display: block;
;)

voici un petit script d'info-bulle
26/04/2007, 11h22
SpaceFrog

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

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... :cry:

Voici mon code :

Dans mon CSS

Code:

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:

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

27/04/2007, 08h52
SpaceFrog

ce qui détermine la position verticale c'est le top ....
27/04/2007, 11h16
debie1108

Bonjour:P ,

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....:cry:

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 ;)
27/04/2007, 11h19
SpaceFrog

-10em ....
29/04/2007, 04h28
debie1108

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
29/04/2007, 09h34
SpaceFrog

le moins devant je l'ai pas mis pour la décoration ... :roll:
29/04/2007, 14h59
debie1108

J'entends bien SpaceFrog...:D

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...
01/05/2007, 07h04
debie1108

Bonjour,

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

Merci d'avance.
DEb
01/05/2007, 08h59
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...
01/05/2007, 12h23
Auteur
Citation:

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:

1 2 margin: 2px;
par :
Code:

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;)
02/05/2007, 05h11
debie1108

Bonjour,

Ca marche parfaitement ! :yaisse2:
Merci beaucoup de votre aide.

Bonne journée, :P
Deb !