Discussion :

[doudoustephane]

Bonjour.
Je cherche à afficher un page html dans un fenêtre sur rollover d'un texte.
Le problème, c'est que je ne veux pas que c'est fenêtre soit une popup mais plus comme un menu. Un exemple est disponible sur cette page (http://www.ae.com/web/international/...questid=194743) en mettant votre souris sur "My Bag" à droite et le reste du menu sur la même ligne.
Savez-vous comment faire ?
Ou connaissez-vous un gabarit/framework/librairie qui me permettent de faire cela ?
Merci d'avance
Cordialement

[Auteur]

bonjour,

la galerie CSS peut sans doute répondre à ton problème ?

[SpaceFrog]

window prototype ...
fais une recherche sur le forum ..

[doudoustephane]

bonjour,

la galerie CSS peut sans doute répondre à ton problème ?

Cela va en effet me convenir pour faire un menu, mais pas pour y intégrer une page web avec formulaire par exemple, à priori
Mais bon, je regardes quand meme si je ne pourrais pas l'adapter pour cela...

[SpaceFrog]

http://dcabasson.developpez.com/arti...ototype-1.4.0/

[doudoustephane]

http://dcabasson.developpez.com/arti...ototype-1.4.0/

Oui, j'ai vu
Merci
Mais j'avoue que j'ai déjà regardé protoype et cela ne me semble pas très simple d'utilisation.
Mais je reprend avec ce lien d'aide voir...

[doudoustephane]

bonjour,

la galerie CSS peut sans doute répondre à ton problème ?

en fait, cela ne convient pas car leur menu, lorsqu'il s'ouvre, déplace le reste de la page, et ça, je ne le souhaite pas
je continue de regarder prototype

[Bovino]

Eventuellement, prototip, un plugin de prototype, pourra te donner une solution correspondant à ce que tu cherches.

[SpaceFrog]

joli en effet Beef !

ça existe en moins... cher
http://www.walterzorn.com/tooltip/to...e.htm#download

[Bovino]

ça existe en moins... cher
http://www.walterzorn.com/tooltip/to...e.htm#download

Moins lourd aussi ! Pas besoin de charger prototype juste pour une infobulle !

[Auteur]

Moins lourd aussi ! Pas besoin de charger prototype juste pour une infobulle !

pour l'infobulle tu as toujours l'attribut tittle (pardon ? oui, d'accord je sors....).

en fait, cela ne convient pas car leur menu, lorsqu'il s'ouvre, déplace le reste de la page, et ça, je ne le souhaite pas

C'est à dire ? Normalement ces menus ne bousculent pas le contenu de la page.

[doudoustephane]

C'est à dire ? Normalement ces menus ne bousculent pas le contenu de la page.

ben, j'ai fait un essai avec les exemples fournis dans la galerie css, et cela déplacer mon texte en fonction du menu que j'ouvrais...

[Auteur]

Montre nous ton code. Et quel menu as-tu utilisé ?

[SpaceFrog]

ça sent le z-index ça ...

[Bovino]

Tu insères probablement ton élément au mauvais endroit dans le DOM. D'où le déplacement du reste de la page...

[doudoustephane]

en fait, je parviens à faire ce que je veux avec prototype, ce qui résoud mon problème
mais il me reste deux points qui m'embete :
1) la taille verticale et horizontale sont pour le moment fixe alors que mon texte à afficher est variable.
je souhaite donc récupérer les dimensions de mon div afficher par prototype en javascript mais les solutions que j'ai essayé (style.height, offsetheight notamment) retourne toujours 0.
comment faire pour les récupérer svp ?
2) je souhaite que la fenêtre, que j'ouvre sur "onmouseover", se ferme sur "onmouseout" du texte (si elle n'est pas sur la fenêtre prototype bien sur).
le problème est que, si je mets une fonction de fermeture sur onmouseout, avec ou sans timer, la fenêtre se ferme et se rouvre sans arret.
J'espère être suffisamment clair.
A quel moment ou comment fermer la fenetre automatiquement donc, sans que l'utilisateur soit obliger de cliquer sur un bouton ou un lien "fermer" ?

merci d'avance
cordialement

[Auteur]

pour le 1)
- style.height retournera toujours 0 sauf si tu définis la valeur dans un script. Sinon c'est offsetHeight (c'est avec une majuscule)

pour le 2)
- ça c'est un problème au niveau de la propagation des événements dans les éléments imbriqués. Montre nous ton code HTML + CSS + JS (pas le PHP).

[doudoustephane]

pour le 1)
- style.height retournera toujours 0 sauf si tu définis la valeur dans un script. Sinon c'est offsetHeight (c'est avec une majuscule)

pour le 2)
- ça c'est un problème au niveau de la propagation des événements dans les éléments imbriqués. Montre nous ton code HTML + CSS + JS (pas le PHP).

Merci de ta réponse.
Pour le "H" majuscule du offsetheight, c'est que je ne l'avais pas mis dans mon message mais il y était bien dans ma page web.
Pour le code, voici la partie qui nous concerne:

Code :

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

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
<link rel="stylesheet" type="text/css" href="includes/style.css"/>
<script type="text/javascript" src="includes/script/couleurs_text.js"></script>
<script type="text/javascript" src="includes/script/chiffres_lettres.js"></script>
<script type="text/javascript" src="includes/script/preload_image.js"></script>
<script type="text/javascript" src="includes/script/overlib/overlib.js"></script>
<script type="text/javascript" src="includes/script/prototype/prototype.js"></script>
<script type="text/javascript" src="includes/script/prototype/debug.js"></script>
<script type="text/javascript" src="includes/script/prototype/effects.js"></script>
<script type="text/javascript" src="includes/script/prototype/tooltip.js"></script>
<script type="text/javascript" src="includes/script/prototype/window.js"></script>
<script type="text/javascript" src="includes/script/prototype/window_effects.js"></script>
<script type="text/javascript" src="includes/script/prototype/window_ext.js"></script>
<!-- <script type="text/javascript" src="pieddepage.js"></script> --></head>
<script type="text/javascript">
	var win;
	window.body.onclik=close_menu;
	window.body.onMouseOver=close_menu;
	function open_menu()
	{
		win = new Window("win", {className: "dialog", zIndex: 100, showEffect:Effect.BlindDown, hideEffect: Effect.SwitchOff, destroyOnClose: true, showEffectOptions: {duration:0.5}});
		win.getContent().innerHTML= "<div class='menu'><a href=\'categories-8.php\' class=\'texte_menu\'>Compensées</a></div>";
		var position = findPos(document.getElementById('boutique_menu'));
		win.setLocation(position[1]+3, position[0]);
		win.show();
	}
 	function close_menu()
	{
		win.destroy();
  	}
	function findPos(obj) 
	{
		var curleft = curtop = 0;
		if (obj.offsetParent) 
		{
			curleft = obj.offsetLeft;
			curtop = obj.offsetTop;
			while (obj = obj.offsetParent) 
			{
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			}
		}
		return [curleft,curtop];
	}
</script>
<a href="index.php" id="boutique_menu" onMouseOver="open_menu();" class="navigation_violet">Boutique</a>

Merci

[Auteur]

Code :

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

window.body.onclik=close_menu;

- c'est onclick (manque un c)

Code :

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

window.body.onMouseOver=close_menu;

et

Code html :

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

1
2
 
<a href="index.php" id="boutique_menu" onMouseOver="open_menu();" class="navigation_violet">

- pour le onmouseover il y a deux fonctions antagonistes : dans un cas tu ouvres le menu (sur la balise <a>) dans l'autre tu le fermes (quand la souris est dans le <body>).

Ce qu'il se passe : quand tu fais onmouseover sur la balise <a> tu appelles open_menu() et comme <a> est dans <body> tu appelles également la fonction définie dans le onmouseover de la balise <body> : tu fermes le menu (appel de close_menu()).
Mais comme ta souris est toujours sur la balise <a> au moment où le menu se ferme l'événement onmouseover de la balise <a> se déclenche à nouveau, le menu s'affiche, etc., etc.
ton menu clignote


Essaye d'appeler la fonction sur l'événement onmouseout() dans la balise <a> et supprime cette ligne de code :

Code :

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

window.body.onMouseOver=close_menu;

Sinon il faudrait voir si tu ne peux pas court-circuiter l'événement onmouseover de la balise <body> quand il se produit sur la balise <a>.

[doudoustephane]

Code :

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

window.body.onclik=close_menu;

- c'est onclick (manque un c)

Ok, merci, faute de frappe et d'inatention

Code :

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

window.body.onMouseOver=close_menu;

et
Code html :

<a href="index.php" id="boutique_menu" onMouseOver="open_menu();" class="navigation_violet">


- pour le onmouseover il y a deux fonctions antagonistes : dans un cas tu ouvres le menu (sur la balise <a>) dans l'autre tu le fermes (quand la souris est dans le <body>).

Ce qu'il se passe : quand tu fais onmouseover sur la balise <a> tu appelles open_menu() et comme <a> est dans <body> tu appelles également la fonction définie dans le onmouseover de la balise <body> : tu fermes le menu (appel de close_menu()).
Mais comme ta souris est toujours sur la balise <a> au moment où le menu se ferme l'événement onmouseover de la balise <a> se déclenche à nouveau, le menu s'affiche, etc., etc.
ton menu clignote


Essaye d'appeler la fonction sur l'événement onmouseout() dans la balise <a> et supprime cette ligne de code :

Code :

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

window.body.onMouseOver=close_menu;

Sinon il faudrait voir si tu ne peux pas court-circuiter l'événement onmouseover de la balise <body> quand il se produit sur la balise <a>.

Oui, mais pour le body, je ne sais pas si j'y ai vraiment accès vu que ma page est rempli de partout par des div et table. A priori, non.
Sinon, j'ai essayé le onmouseout sans la fermeture sur le body, et le menu continu de clignoter également...
Merci de ton aide