Grace à ta Solution j'ai pu créer mes 3 DIV, merci beaucoup !
J'ai essayé de mettre un test onMouseOver="inbulle(this.id,this.style.top,this.style.left)" sur chacun des DIV créés, pour envoyer ces trois paramètres (id, top, et left) à la fonction d'info-bulle mais l'infobulle ne reconnait ces paramètres que si ce sont des valeurs numériques, comme 150 pour LEFT par exemple.
Mon but est que l'info-bulle se place toujours au-dessus du DIV sur lequel passe la souris, et en prenant comme position la position du DIV et pas celui de la souris comme je vois souvent dans les scripts d'info-bulles.
Voilà mon code complet qui fonctionne si on le colle dans une page vide :
Mais le déplacement de l'info-bulle ne se fait pas.
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
| var Liste=new Array("voitures","animaux","plantes");
var voitures=new Array();
var animaux=new Array();
var plantes=new Array();
var choix=0;
var n=0;
voitures[0]="Marque Mazda*Couleur Bleue*Prix: 15000*Etat: Neuve*Année: 2013";
voitures[1]="Marque Mercedes*Couleur Noire*Prix: 25000*Etat: Neuve*Année: 2011";
voitures[2]="Marque Renault*Couleur Blanche*Prix: 6000*Etat: Occasion*Année: 2014";
animaux[0]="Quadrupède*Biche*Habitat: Bois*Age: 6 ans*Vitesse: Rapide";
animaux[1]="Quadrupède*Mule*Habitat: campagne*Age: 8 ans*Vitesse: lent";
animaux[2]="Bipède*Autruche*Habitat: Australie*Age: 5 ans*Vitesse: Trés Rapide";
// Plantes n'est pas encore défini.
// Fonction d'infobulle pour les 3 liens DIV
function inbulle(id,left,top)
{
switch(choix)
{
case 0:fiche=voitures[id].split("*");break;
case 1:fiche=animaux[id].split("*");break;
case 2:fiche=plantes[id].split("*");break;
}
var texte=fiche[2]+"</br>"+fiche[3]+"</br>"+fiche[4];
document.getElementById("bulle").innerHTML=texte;
document.getElementById("bulle").style.left=left+"px";
document.getElementById("bulle").style.top=top+"px";
}
// Fonction qui crée et affiche les 3 liens DIV.
function affiche(tableau)
{
var texte="";
for(n=0;n<tableau.length;n++)
{
var fiche=tableau[n].split("*");
var aDiv = document.createElement('div');
aDiv.setAttribute('id', n);
aDiv.setAttribute('class','liens');
document.getElementById('affichage').appendChild(aDiv);
//left=aDiv.style.left;
//top=aDiv.style.top;
left=document.getElementById(n).style.left;
top=document.getElementById(n).style.top;
aDiv.setAttribute('onMouseOver','inbulle(this.id,left,top)' );
texte=fiche[0]+" : "+fiche[1];
document.getElementById(n).innerHTML=texte;
}
document.getElementById("bulle").innerHTML="";
}
// Fonction saisie lancée par un bouton ou par un champ 'text'.
function saisie(valeur)
{
choix=parseInt(valeur);
switch(choix)
{
case 0:affiche(voitures);break; // Affiche le tableau des voitures.
case 1:affiche(animaux);break; // Affiche le tableau des animaux.
case 2:affiche(plantes);break; // Affiche le tableau des plantes.
}
} |
Dans le body il y a d'abord un champ text :
<input type="text" id="invite" onchange="saisie(this.value)"></input>
Sous le champ texte se trouve un div contener qui se nomme "affichage", dans lequel je crée les 3 liens DIV.
Dans le code JS, c'est cette ligne qui ne transmet pas les parametres à l'infobulle :
aDiv.setAttribute('onMouseOver','inbulle(this.id,left,top)' );
Partager