Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Afficher et Cacher un 'DIV'

Afficher et Cacher un 'DIV'

6 réponses
Avatar
Andre
Hello,



J'ai un le problème suivant avec mon code. Lors du survol (mouseOver)
d'un bouton (il y en a 4 sur la page) j'affiche un 'DIV' avec les
informations du bouton, et lors du mouseOut je cache (hidden) le 'DIV'.



Mon problème est que tous fonctionnent à merveille pour la première
fois, mais à partir de la 2e fois le 'DIV' ne se cache plus.. Ils
s'affichent tous parfaitement, mais le mouseOut ne fonctionne plus.. Même si
la function est appelée (tester avec un Alert).



Est-ce que quelqu'un aurait une idée de mon problème?



Merci et voici mon code.





function dHelp(btn,txt){
yPos = eval(document.getElementById(btn).offsetTop);
xPos = eval(document.getElementById(btn).offsetLeft);

var noteDiv=document.createElement('div');
document.body.appendChild(noteDiv);
noteDiv.id='noteDiv';
noteDiv.style.position='absolute';
noteDiv.style.top=yPos-100;
noteDiv.style.left=xPos+20;
noteDiv.style.background='lightyellow';
noteDiv.style.fontFamily='Verdana';
noteDiv.style.fontSize='x-small';
noteDiv.style.width=200;
noteDiv.style.height=85;
noteDiv.style.padding=8;
noteDiv.style.textAlign='center';
noteDiv.style.border='1 solid black';
noteDiv.innerHTML=txt;
}

function close_Help(){
document.getElementById('noteDiv').style.visibility='hidden';
}
Signaler un problème avec ce contenu

6 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Le Fou
Andre a écrit

J'ai un le problème suivant avec mon code. Lors du survol (mouseOver)
d'un bouton (il y en a 4 sur la page) j'affiche un 'DIV' avec les
informations du bouton, et lors du mouseOut je cache (hidden) le 'DIV'.
Mon problème est que tous fonctionnent à merveille pour la première
fois, mais à partir de la 2e fois le 'DIV' ne se cache plus.. Ils
s'affichent tous parfaitement, mais le mouseOut ne fonctionne plus.. Même
si

la function est appelée (tester avec un Alert).
Merci et voici mon code.


Il en manque un bout ;-)
Tu pourrais pas mettre ça en ligne, qu'on puisse tester ?

--
A'tchao

Le Fou
http://perso.club-internet.fr/ehiller/
http://club.exocet.free.fr/
http://www.ffessm-cd84.com/

Avatar
Bul
ça vient de appendchild qui AJOUTE un élément ?
perso, j'aurais mis un seul div caché
exemple ?
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
function dHelp(btn,txt)

{noteDiv.style.top=parseInt(document.getElementById(btn.id).style.top)-100+"
px";

noteDiv.style.left=parseInt(document.getElementById(btn.id).style.left)+20+"
px";
noteDiv.innerHTML=txt;
noteDiv.style.display="inline"; }
function close_Help()
{ noteDiv.style.display='none';}
</script>
<div id="noteDiv"
style=" top:0;left:0;
position:'absolute';
background='lightyellow';
fontFamily='Verdana';
fontSize='x-small';
width 0;
height…;
padding=8;
textAlign='center';
border='1 solid black';"></div>
<button id="bouton1"
style="position:'absolute';top:'200';left:'200';";
onmouseover="dHelp(this,'texte exemple 1');"
onmouseout="close_Help();">exemple 1</button>
<button id="bouton2"
style="position:'absolute';top:'300';left:'300';";
onmouseover="dHelp(this,'texte exemple 2');"
onmouseout="close_Help();">exemple 2</button>
</BODY></HTML>
@+
Avatar

Hello,

J'ai un le problème suivant avec mon code. Lors du survol (mouseOver)
d'un bouton (il y en a 4 sur la page) j'affiche un 'DIV' avec les
informations du bouton, et lors du mouseOut je cache (hidden) le 'DIV'.

Mon problème est que tous fonctionnent à merveille pour la première
fois, mais à partir de la 2e fois le 'DIV' ne se cache plus.. Ils
s'affichent tous parfaitement, mais le mouseOut ne fonctionne plus.. Même si
la function est appelée (tester avec un Alert).


Ne serait-ce pas normal ? (à mon idée : oui ce l'est)

tu as une fonction qui crée un div appelé 'noteDiv'
sur l'ensemble des boutons, on obtient donc x divs de même nom
sur la même page (ce qui n'est pas permis/autorisé)
Au mouseout de 'noteDiv', lequel d'entre-eux veux-tu cacher ?
le browser ne le sait pas et ne fait rien

donc, soit modifier :
- la fonction de création des noteDivs pour individualiser chacun
et celle de cache
ou
- la fonction de cache avec une routine pour cacher tous les noteDiv

Merci et voici mon code.

function dHelp(btn,txt){
yPos = eval(document.getElementById(btn).offsetTop);
xPos = eval(document.getElementById(btn).offsetLeft);

var noteDiv=document.createElement('div');
document.body.appendChild(noteDiv);


ici :
noteDiv.id='noteDiv';


préférer qque chose comme :
notediv.id=btn.id+'noteDiv';

noteDiv.style.position='absolute';
noteDiv.style.top=yPos-100;
noteDiv.style.left=xPos+20;
noteDiv.style.background='lightyellow';
noteDiv.style.fontFamily='Verdana';
noteDiv.style.fontSize='x-small';
noteDiv.style.width 0;
noteDiv.style.height…;
noteDiv.style.padding=8;
noteDiv.style.textAlign='center';
noteDiv.style.border='1 solid black';
noteDiv.innerHTML=txt;
}


et pour le cachagement :

function close_Help(btn){
document.getElementById(btn.id+'noteDiv').style.visibility='hidden';
}


--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************

Avatar

Est-ce que quelqu'un aurait une idée de mon problème?


oui : à chaque mouse over tu crées un nouveau div
(combien va t-on finir par en avoir ?)
(comment faire pour savoir lequel cacher ?)

donc voici comment je corrige ton code :

<style type="text/css"><!--
img { width:150px; }
img:hover { cursor:pointer; }
--></style>
<script type="text/javascript"><!--
function dHelp(btn,txt){
if(!(document.getElementById(btn.id+'noteDiv')))
{
yPos = document.getElementById(btn.id).offsetTop;
xPos = document.getElementById(btn.id).offsetLeft;

var noteDiv=document.createElement('div');
document.body.appendChild(noteDiv);
noteDiv.id = btn.id+'noteDiv';
noteDiv.style.position='absolute';
noteDiv.style.top = (yPos+100)+'px';
noteDiv.style.left = (xPos+20)+'px';
noteDiv.style.background='lightyellow';
noteDiv.style.fontFamily='Verdana';
noteDiv.style.fontSize='x-small';
noteDiv.style.width='200px';
noteDiv.style.height='85px';
noteDiv.style.padding='8px';
noteDiv.style.textAlign='center';
noteDiv.style.borderWidth='1px';
noteDiv.style.borderStyle='solid';
noteDiv.style.borderColor='black';
noteDiv.innerHTML=txt;
}
document.getElementById(btn.id+'noteDiv').style.visibility='visible';
}
function closeHelp(btn){
truc = btn.id+'noteDiv';
document.getElementById(truc).style.visibility='hidden';
}
// --></script>
<img src="asm1.gif" id=un
onmouseover="dHelp(this,'Voici une petite aide');"
onmouseout="closeHelp(this);">
<img src="asm2.gif" idÞ
onmouseover="dHelp(this,'Voici une petite aide <h2>Num 2</h2>');"
onmouseout="closeHelp(this);">
<img src="asm3.gif" id=tr
onmouseover="dHelp(this,'Voici une petite aide <h2>Num 3</h2>'+
'<h3>plus un tout petit complement, pour voir le div s'etendre</h3>');"
onmouseout="closeHelp(this);">


--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************

Avatar
Andre
C'est dans le parfait...

Merci.


"@SM" a écrit dans le message de
news:



Hello,

J'ai un le problème suivant avec mon code. Lors du survol
(mouseOver)


d'un bouton (il y en a 4 sur la page) j'affiche un 'DIV' avec les
informations du bouton, et lors du mouseOut je cache (hidden) le 'DIV'.

Mon problème est que tous fonctionnent à merveille pour la première
fois, mais à partir de la 2e fois le 'DIV' ne se cache plus.. Ils
s'affichent tous parfaitement, mais le mouseOut ne fonctionne plus..
Même si


la function est appelée (tester avec un Alert).


Ne serait-ce pas normal ? (à mon idée : oui ce l'est)

tu as une fonction qui crée un div appelé 'noteDiv'
sur l'ensemble des boutons, on obtient donc x divs de même nom
sur la même page (ce qui n'est pas permis/autorisé)
Au mouseout de 'noteDiv', lequel d'entre-eux veux-tu cacher ?
le browser ne le sait pas et ne fait rien

donc, soit modifier :
- la fonction de création des noteDivs pour individualiser chacun
et celle de cache
ou
- la fonction de cache avec une routine pour cacher tous les noteDiv

Merci et voici mon code.

function dHelp(btn,txt){
yPos = eval(document.getElementById(btn).offsetTop);
xPos = eval(document.getElementById(btn).offsetLeft);

var noteDiv=document.createElement('div');
document.body.appendChild(noteDiv);


ici :
noteDiv.id='noteDiv';


préférer qque chose comme :
notediv.id=btn.id+'noteDiv';

noteDiv.style.position='absolute';
noteDiv.style.top=yPos-100;
noteDiv.style.left=xPos+20;
noteDiv.style.background='lightyellow';
noteDiv.style.fontFamily='Verdana';
noteDiv.style.fontSize='x-small';
noteDiv.style.width 0;
noteDiv.style.height…;
noteDiv.style.padding=8;
noteDiv.style.textAlign='center';
noteDiv.style.border='1 solid black';
noteDiv.innerHTML=txt;
}


et pour le cachagement :

function close_Help(btn){
document.getElementById(btn.id+'noteDiv').style.visibility='hidden';
}


--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************



Avatar

C'est dans le parfait...


he bien tant mieux

Merci.


du tout
cependant le bon script n'est pas celui-ci ;-)


"@SM" a écrit dans le message de
news:

donc, soit modifier :
- la fonction de création des noteDivs pour individualiser chacun
et celle de cache

function dHelp(btn,txt){
yPos = eval(document.getElementById(btn).offsetTop);
xPos = eval(document.getElementById(btn).offsetLeft);

var noteDiv=document.createElement('div');
document.body.appendChild(noteDiv);


ici :
noteDiv.id='noteDiv';


préférer qque chose comme :
notediv.id=btn.id+'noteDiv';


et pour le cachagement :

function close_Help(btn){
document.getElementById(btn.id+'noteDiv').style.visibility='hidden';
}



--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************