Comment laisser une fenêtre ouverte si on déplace le curseur ailleurs?

Question

~~supprimé~~

6 Jun 2011 à 17:56

Bonjour à toutes et à tous,

j'utilise des 'onmouseover' et 'onmouseout' sur une icône. J'ai associé sur 'onmouseover' une fonction javascript qui ouvre une fenêtre et sur le 'onmouseout' une autre fonction javascript qui ferme la même fenêtre.

Cette fenêtre est un iframe !

Je n'ai aucun problème car cela fonctionne très bien.

Mais mon soucis est mon ignorance. En effet, si je déplace mon curseur sur la fenêtre et bien elle se ferme, ce qui est normale, jusqu'à présent. Donc j'aimerai connaitre l'évènement qui permet de maintenir ouverte cette fenêtre lorsque le curseur y est positionné ?

Est-ce un onmouse... quelque chose ?

Je ne sais pas comment m'y prendre pour laisser cette fenêtre ouverte lorsque le curseur est positionné dessus.

Merci de votre obligeance !

@+

lddsoft

7 Jun 2011 à 20:04

Bonjour,

"onmouseover" sur l'iframe, non? Smiley smile

~~supprimé~~

7 Jun 2011 à 22:52

Bonsoir à toutes et à tous,

merci du renseignement mais ça ne m'aide pas beaucoup.

Je sais que l'on peut gérer l'icone et la fenêtre iframe de cette façon.

Maintenant comment gérer le 'onmouseout', puisque le problème est essentiellement lui, sachant les comportements suivant :

1) le curseur quitte l'icone sans passer par l'iframe. C'est le cas normal.
2) le curseur quitte l'icone mais passe par l'iframe.
3) le curseur quitte l'iframe sans repasser par l'icone.

En somme la question que je me pose est comment savoir où se trouve mon curseur ?

Le fenêtre est ouverte ! (c'est la condition primordiale).

a) mon curseur est sur l'icone alors je ne fais rien.
b) mon curseur se déplace vers et sur l'iframe alors je ne fais rien.
c) mon curseur se déplace ailleurs que sur l'icone et l'iframe alors je ferme la fenêtre.

Maintenant comment connaitre la position du curseur vis-à-vis de l'icone et de l'iframe ?

Je ne veux pas procéder comme dans le cas d'un MAP où je serais obligé d'indiquer, sous forme de deux rectangles, les surfaces autorisées ou pas.

Je peux donner le code javascript, mais je pense que le problème n'est pas dans ce que j'ai fait mais plutôt dans ce que je n'ai pas fait.

@+
Modifié par Artemus24 (07 Jun 2011 - 22:54)

~~supprimé~~

12 Jun 2011 à 13:44

Bonjour à toutes et à tous,

je vous communique mes codes afin de tenter de résoudre mon problème. Merci.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Les iFrames</title>

<script language="javascript" type="text/javascript" src="JS/Show_Props.js"></script>
<script language="javascript" type="text/javascript" src="JS/Script.js"></script>
<script language="javascript" type="text/javascript">
	panelNode.begin();

	panelNode.insert("Emoticon_01.jpeg", "G", "Page_01.html");
	panelNode.insert("Emoticon_02.jpeg", "G", "Page_02.html");
	panelNode.insert("Emoticon_03.jpeg", "G", "Page_03.html");
	panelNode.insert("Emoticon_04.jpeg", "G", "Page_04.html");
	panelNode.insert("Emoticon_05.jpeg", "G", "Page_05.html");
	panelNode.insert("Emoticon_06.jpeg", "G", "Page_06.html");
	panelNode.insert("Emoticon_07.jpeg", "G", "Page_07.html");
	panelNode.insert("Emoticon_08.jpeg", "G", "Page_08.html");
	panelNode.insert("Emoticon_09.jpeg", "G", "Page_09.html");
	panelNode.insert("Emoticon_10.jpeg", "G", "Page_10.html");
	panelNode.insert("Emoticon_11.jpeg", "G", "Page_11.html");

	panelNode.insert("Emoticon_12.jpeg", "D", "Page_12.html");
	panelNode.insert("Emoticon_13.jpeg", "D", "Page_13.html");
	panelNode.insert("Emoticon_14.jpeg", "D", "Page_14.html");
	panelNode.insert("Emoticon_15.jpeg", "D", "Page_15.html");
	panelNode.insert("Emoticon_16.jpeg", "D", "Page_16.html");
	panelNode.insert("Emoticon_17.jpeg", "D", "Page_17.html");
	panelNode.insert("Emoticon_18.jpeg", "D", "Page_18.html");
	panelNode.insert("Emoticon_19.jpeg", "D", "Page_19.html");
	panelNode.insert("Emoticon_20.jpeg", "D", "Page_20.html");
	panelNode.insert("Emoticon_21.jpeg", "D", "Page_21.html");

	panelNode.finish();
</script>

<link rel="stylesheet" type="text/css" media="screen" href="CSS/Styles.css" />
</head>

<!-- <body OnLoad="show_props(window,'window');"> -->

<body>
<div id="corps">
	<p> ca marche moyennement bien mais on pourra faire mieux la prochaine fois !</p>
</div>

</body>
</html>

/************************************************************/
/*                                                          */
/*     Affichage des Icones et sélections des page HTML     */
/*                                                          */
/************************************************************/

var panelNode = {

panelID: null,			// identification du panel

divGauche: 0,			// division gauche
divDroite: 0,			// division droite

pixelWidth: 0,			// Largeur pas à pas
clockID: null,			// setinterval

/****************************************************/
/*                                                  */
/*     Traitement avant le Début des Insertions     */
/*                                                  */
/****************************************************/

begin : function ()
{
	document.write("<iframe id='panel' width='300' frameborder='0' scrolling='no'></iframe>");

	this.panelID = document.getElementById("panel");
},

/**************************************************/
/*                                                */
/*     Traitement après la Fin des Insertions     */
/*                                                */
/**************************************************/

finish: function ()
{
	if (this.divDroite == 1)
		document.writeln("</div>");

	this.gauche();
	this.button_off();
},

/***************************************************/
/*                                                 */
/*     Insertion de l'image et du fichier HTML     */
/*                                                 */
/***************************************************/

insert: function (img, cote, file)
{
	/*------------------------------------------*/
	/*     traitement de la Division Gauche     */
	/*------------------------------------------*/

	if ((cote == "G") && (this.divGauche == 0))
	{
		this.divGauche = 1;

		document.write("<div id='gauche'>");
	}

	/*------------------------------------------*/
	/*     traitement de la Division Droite     */
	/*------------------------------------------*/

	if ((cote == "D") && (this.divDroite == 0))
	{
		this.divDroite = 1;

		if (this.divGauche == 1)
			document.writeln("</div>");

		document.write("<div id='droite'>");
	}

	/*------------------------------*/
	/*     Insertion de l'Image     */
	/*------------------------------*/

	if (img != "")
	{
		document.write("<img src='Images/" + img + "' />");

		var x = document.images.length - 1;

		document.images[x].onmouseover	= function () { panelNode.ouvre(this); }
		document.images[x].onmouseout	= function () { panelNode.ferme(this); }

		document.images[x].file			= "Html/" + file;
	}
},

/*****************************************/
/*                                       */
/*     Ouverture de la Page 'IFRAME'     */
/*                                       */
/*****************************************/

ouvre: function (node)
{
	this.panelID.src = node.file;

	this.dimension();

	if (node.parentNode.id == "gauche")	this.gauche();
	if (node.parentNode.id == "droite")	this.droite();

	window.clearInterval(this.clockID);
	this.clockID = null;

	this.button_on();

	this.clockID = window.setInterval("panelNode.increase();" , 5);
},

/*****************************************/
/*                                       */
/*     Fermeture de la Page 'IFRAME'     */
/*                                       */
/*****************************************/

ferme: function ()
{
	window.clearInterval(this.clockID);
	this.clockID = null;

	this.clockID = window.setInterval("panelNode.decrease();" , 5);
},

/*************************************************/
/*                                               */
/*     Augmentation de la Page à l'ouverture     */
/*                                               */
/*************************************************/

increase: function ()
{
	this.pixelWidth   += 10;
	this.panelID.width = this.pixelWidth;

	if (this.pixelWidth >= 300)
	{
		window.clearInterval(this.clockID);
		this.clockID = null;
	}
},

/***********************************************/
/*                                             */
/*     Diminution de la Page à l'ouverture     */
/*                                             */
/***********************************************/

decrease: function ()
{
	this.pixelWidth   -= 10;
	this.panelID.width = this.pixelWidth;

	if (this.pixelWidth <= 0)
	{
		window.clearInterval(this.clockID);
		this.clockID = null;

		this.button_off();
	}
},

/****************************************************/
/*                                                  */
/*     Dimensionnement de 'panel' et de 'corps'     */
/*                                                  */
/****************************************************/

dimension: function ()
{
	document.getElementById("corps").height	= "100%";

	this.panelID.height	= "100%";
	this.panelID.width	= 0;
},

/********************************************/
/*                                          */
/*     Bouton de Visualisation du Panel     */
/*                                          */
/********************************************/

button_on: function ()
{
	this.panelID.style.display	= "block";
},

button_off: function ()
{
	this.panelID.style.display = "none";
},

/**********************************************/
/*                                            */
/*     Position gauche et droite du Panel     */
/*                                            */
/**********************************************/

gauche: function ()
{
	this.panelID.style.left		= "50px";
	this.panelID.style.right	= null;
},

droite: function ()
{
	this.panelID.style.left		= null;
	this.panelID.style.right	= "50px";
}

};

@+

Sujet clos