InfoBulles sur image mappée mais ayant subie un rollover

Version imprimable

24/02/2006, 19h52
shadokk

InfoBulles sur image mappée mais ayant subie un rollover

Bonjour,

Mon problème est le suivant. J'ai un code dans ce style là dans une page web que j'ai écrite :

<a href="#" onMouseOver="img1.src='panneau_complet.jpg'" onClick="img1.src='imgpanneau_gau.jpg'" />
<img src="imgpanneau_gau.jpg" name="img1" border="0" />

Il y a donc comme on le suppose deux images qui sont chargées sur la page en rollover, celle qui apparait suite à un survol de la souris reste ouverte tant qu'on ne clique pas dessus.

J'aimerais savoir comment je pourrais mettre des infosbulles dans cette image (panneau_complet.jpg) qui s'est ouverte et que je rendrais réactive sur certaines zones.

Sur des liens ou sur des images statiques c relativement facile d'insérer des bulles mais jvois mal comment insérer une fonction javascript dans mon code tel qu'il est.

Je précise que je ne m'y connais pas vraiment en javascript, donc peut-être que la solution m'échape à cause de ça mais j'aimerais quand même un ptit coup de main sur l'astuce à suivre.

Merci
24/02/2006, 20h00
amika

tout simplement title="..."

Code:

<img src="imgpanneau_gau.jpg" name="img1" border="0" title="..." />
24/02/2006, 20h06
shadokk

Merci de m'avoir répondu !!

Mais en fait jpensais plutot à des Bulles complexes en JS ou Css, pas les pseudos bulles de Alt ou Title, mais ça aurait été une solution effectivement.
24/02/2006, 20h08
shadokk

Jme demande en fait si je devrais pas charger l'image réactive avec infobulles et la rendre invisible, puis l'afficher seulement quand le rollover se produit ...

Je pense que cela devrait te plaire, fait rapidos en live la :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<html>
<head>
<title>simuler un title</title>
<script language="javascript">
 
showingTitle=false;
mousex=0;
mousey=0
function getMouseCoord(e)
{ 
  //pour ie seulement... onmouseove ne lui renvoye pas l'évenement, contrairement au moteur gecko de FF/mozilla
  if (!e)
  {
    e = window.event;
  }
 
  //on peut ici avec le moteur gecko utiliser directement e.pageX et e.pageY, mais ie encore...
  if (e)
  {
    mousex = e.clientX + document.body.scrollLeft;
    mousey = e.clientY + document.body.scrollTop;
 
    //si un title est affiché, lancons son suivi de souris
    if(showingTitle)
    {
      updateTitlePos();
    }
  }
}
function updateTitlePos()
{
    document.getElementById("infobulle").style.left=mousex;
    document.getElementById("infobulle").style.top=mousey;
}
 
function simulerTitle(txt)
{
  //on remplis avec le texte
  document.getElementById("infobulle").innerHTML=txt;
 
  //on place le div au bon endroit
  document.getElementById("infobulle").style.left=mousex;
  document.getElementById("infobulle").style.top=mousey;
 
  //on l'affiche en temps qu'élément inline
  document.getElementById("infobulle").style.display="inline";
  //on préviens le script qu'on est en train d'afficher un title
  showingTitle=true;
}
 
function hideTitle()
{
  //on previens le script
  showingTitle=false;
  //qu'on masque le div
  document.getElementById("infobulle").style.display="none";
}
 
document.onmousemove=getMouseCoord;
 
</script>
</head>
 
<style type="text/css">
#infobulle {
  position:absolute;
  display:none;
  padding:5px;
  margin:5px;
  border:1px solid black;
  background-color:yellow;
  z-index:9999;
}
 
</style>
 
<div id="infobulle"></div>
 
<img src="img1.jpg" onmouseover="simulerTitle('--image1--')" onmouseout="hideTitle();">
<img src="img2.jpg" onmouseover="simulerTitle('--image3--')" onmouseout="hideTitle();">
<img src="img3.jpg" onmouseover="simulerTitle('--image3--')" onmouseout="hideTitle();">

24/02/2006, 22h00
shadokk
Bin en fait je comprends pas tout ton script puisque comme je l'ai dit au début je m'y connais pas vraiment en JS. Mais il est trs intéressant en effet.

Je l'ai un peu expérimenter pour afficher du texte ou des images dans les bulles mais il ne m'aide pas vraiment, ptet que je l'utilise mal après mais à premiere vue je ne sais pas quoi en faire à part des bulles, or ce n'est pas mon souci.

Mon problème est celui ci : imaginons que j'affiche une image sur une page.

Quand je passe la souris sur l'image jveux qu'elle change et affiche une autre image qui restera active meme si j'enleve la souris dessus.

C'était le principe de mon bout de code :
Code:

1 2 3 <a href="#" onMouseOver="img1.src='panneau_complet.jpg'" onClick="img1.src='imgpanneau_gau.jpg'" /> <img src="imgpanneau_gau.jpg" name="img1" border="0" />
Seulement je ne m'arrête pas là, jveux qu'une fois que l'image est affichée (panneau_complet.jpg) que jpuisse faire apparaitre des Bulles dessus.

En fait j'aimerais pouvoir me passer de la commande onmouseover="ID.src='image.jpg' onmouseout etc pour faire mon rollover, comme ça jpourrais agir en local sur la balise <img src>

Tout ce que jveux c'est faire ça :

Un objet image1 statique au départ ---> cet objet doit réagir au passage du curseur pour en afficher un objet image2 ...
Un objet image2 dynamique à l'arrivée ---> cet objet doit réagir au passage du curseur pour afficher des Bulles

Donc jcrois qu'on peut combiner ton code avec du CSS pour obtenir sque je veux, j'ai une idée avec une classe et :hover ça peut donner quelque chose.

Jvous tiens au courant.

Merci

Bon j'ai tenté sans CSS de voir sque ça pourrait donner avec n'importe quelle fonction de Bulles en JS :
Code:

1 2 3 4 <a href="#" onMouseOver="img1.src='image2.jpg'" onClick="OuvrirBulle('Texte Bla bla ',event)" onMouseOut="img1.src='image1.jpg'"> <img src="image1.jpg" name="img1" border="0" /> </a>
J'obtiens presque je veux, sauf que je dois cliquer pour avoir la bulle sur l'image2 qui est apparue, mais l'attribut onMouseOut est deja utilisé donc elle reste à l'écran :-/

J'ai pensé à une astuce comme celle là :
Code:

1 2 3 4 5 6 <a href="#" onMouseOver="img1.src='image2.jpg'" onClick="OuvrirBulle('Cette fichue bulle ferme mais bon ... ',event)" onMouseOut="FermerBulle()"> <img src="image1.jpg" name="img1" border="0" /> </a> <br /> <a href="page.html"> Cliquer pour fermer </a> // astuce qui actualise et donc ferme
Mais ça reste quand même assez moyen en Js. Si on pouvait me donner quelques astuces plus élégantes et plus efficaces. Jvais tenter de combiner la même chose en CSS.

merci