Discussion :

[kahya]

Bonjour à tous! voila j'ai fai une div dans ma page qui s'affiche quand on passe le curseur sur un lien, et qui affiche des info du genre nom prenom etc...
J'ai essayé de faire des retours à la ligne dans cette div mais cela ne marche pas...
Ma div :

Code :

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

<div id="bulle" style="position: absolute; color: #F0F8FF; background-color: #333366; "></div>

La fonction qui permet l'affichage :

Code :

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

1
2
3
4
function pop0(nom, prenom, tel, mail)
{
	document.getElementById("bulle").innerHTML = nom+ "\n\n"+prenom+ "\n"+tel+"\n"+mail;
}

Mes retours à la ligne sont donc les \n mais au final tout est écri sur la même ligne...
Autre chose, j'ai essayé de mettre une bordure à cette div, ça marche mais quand mon curseur n'est plus sur le lien qui demande son affichage, elle ne disparait pas completement, il reste un petit carré noir. Possible de l'enlever??
Ma fonction qui fait disparaitre la div est sur le onmouseout :

Code :

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

1
2
3
4
function disparaitre0()
{
	document.getElementById("bulle").innerHTML = '';
}

Merci vous

[Auteur]

bonjour,

1. remplace les \n par <br />
   

   Code :

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

   1
   2
    
   	document.getElementById("bulle").innerHTML = nom+ "<br /><br />"+prenom+ "<br />"+tel+"<br />"+mail;

2. pour fare apparaître ou disparaître la bulle utilise la propriété display :
   

   Code :

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

   1
   2
    
   document.getElementById("bulle").style.display = "block";

   Code :

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

   1
   2
    
   document.getElementById("bulle").style.display = "none";

[Bisûnûrs]

Les retours à la ligne en HTML ne se font pas avec \n mais <br />.

Et c'est normal qu'il te reste une bordure quand tu quittes ce div; vu qu'il ne disparaît pas, tu vides juste son contenu ...

Deux solutions :
- Soit tu préfères le display:none/block au innerHTML
- Soit tu vires la bordure quand tu quittes ton div :

Code :

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

1
2
3
4
function disparaitre0(){
   document.getElementById("bulle").innerHTML = '';
   document.getElementById("bulle").style.border = 'none';
}

Personnellement la première solution est la meilleure ..

[kahya]

ok merci