Afficher/masquer Div incrustée survol souris

Fermé
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 - 7 août 2010 à 06:43
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 - 21 oct. 2010 à 17:07
Bonjour,
pour vous expliquer mon problème, je vais prendre du concret sur ce site :

Si vous êtes membre, il y a un cadre à droite nommé "Mes interventions".
1. Je voudrais que ce cadre (celui contenant nos interventions) s'ouvre quand la souris cible le lien Mes interventions, et qu'il se ferme quand elle en sort.

merci de votre aide.



A voir également:

10 réponses

Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
Modifié par Theophile76 le 7/08/2010 à 13:54
J'ai presque trouvé :

Code javascript :

<script type="text/javascript">  
function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id  
  var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id  
  if(div.style.display=="none") { // Si le div est masqué...  
    div.style.display = "block"; // ... on l'affiche...  
    bouton.innerHTML = "-"; // ... et on change le contenu du bouton.  
  } else { // S'il est visible...  
    div.style.display = "none"; // ... on le masque...  
    bouton.innerHTML = "+"; // ... et on change le contenu du bouton.  
  }  
}  
</script>


"Masquer/afficher" + Div :

<input value="Autres" type="button"  onmouseover="toggle_div(this,'id-div-autres');" />  

<div id="id-div-autres" style="display:none;">  
Tralalala  
</div>

Le problème est que la div ne se masque pas quand on la dé-cible, il faut re-cibler le bouton pour qu'elle se masque ...
Je pense qu'Il faudrait assigner un mouseover à la div en question mais je ne sais pas trop comment faire.

On s'ennuie pas avec l'informatique :)
1
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
7 août 2010 à 14:04
0
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
7 août 2010 à 14:20
Merci mais les les 2 doivent être séparer pour mon utilisation, alors que là c'est une "div dans une div".
Sinon c'est exactement ce que je voulais, dommage.
Et y'a une faut à la fin fin il manque un /div :)
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
7 août 2010 à 14:24
Il suffit de bouger le div à afficher/masquer.
Pour le cibler facilement en JS, tu peux lui mettre un ID (interventionsContentBlock par exemple).
Et il faudra aussi modifier la ligne 48. Par exemple :
interventionsContentBlock = document.getElementById('interventionsContentBlock');
0
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
8 août 2010 à 04:59
Merci beaucoup, j'essaye tout ça.
0
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
9 août 2010 à 10:34
Donc en fait j'ai bien utilisé ton code, il me convient bien, par contre le code javascript me "désactive" un autre code javascript :
<script type="text/JavaScript">
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>

C'est un code que tu m'avais donné pour que le point d'insertion soit actif dans une input.
Et ça ne fonctionne plus quand je met ce javascript :
script type="text/javascript">
	var interventionsBlock, interventionsContentBlock;

	window.onload = function() {
		interventionsBlock = document.getElementById("interventions");
		interventionsContentBlock = interventionsBlock.getElementsByTagName('div').item(0);

		interventionsBlock.onmouseover = function() {
			interventionsContentBlock.style.display = 'block';
		};

		interventionsBlock.onmouseout = function() {
			interventionsContentBlock.style.display = 'none';
		};
	};
	</script>
0
Profil bloqué
9 août 2010 à 11:46
C'est facilement réalisable avec jquery.

Prends le temps de regarder ce cours : https://www.grafikart.fr/tutoriels/initiation-jquery-84

ça viendra tout seul
0
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
Modifié par Theophile76 le 9/08/2010 à 20:17
Ok merci j'vais aller voir.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
9 août 2010 à 20:18
Sinon pour le bug javascript, quelqu'un connais la raison ?
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
9 août 2010 à 21:56
interventionsContentBlock = interventionsBlock.getElementsByTagName('div').item(0);

Cette ligne va récupérer le premier <div> à l'intérieur de l'élément interventionsBlock (~ document.getElementById("interventions") ).
0
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
10 août 2010 à 10:57
Ok merci, mais je mes où ce code ?
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
10 août 2010 à 12:16
Il y est déjà ... il faut modifier.
0
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
13 oct. 2010 à 08:31
Je relance car j'ai toujours ce problème ><
0
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
21 oct. 2010 à 07:46
Up
0
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
21 oct. 2010 à 17:07
Désolé mais je ne vois pas comment t'aider plus.
0