11548 sujets

JavaScript, DOM et API Web HTML5

Cacher une div grace à object.onmouseout

Bonjour

J'ai créé un petit menu de bas de page :

	<a href="#"  title="Clique moi !" onmouseover="CreationCadreSurprise('','')" onclick="Statistiques()">Statistiques</a> | <a href="http://www.arbitre.net/forum/index.php?act=idx" title="Clique moi !" onmouseover="CreationCadreSurprise('','')" target="_blank">Forum arbitres</a> | <a title="N'hésitez pas à me faire part de vos commentaires. Ils sont précieux pour moi!" href="http://www.arbitre.net/forum/index.php?showuser=7118" target="_blank">Contactez-moi !</a> | <a href="#"  title="Menu" onmouseover="CreationCadreSurprise('Index','menu')" >Menu</a> | <a href="#"  title="Navigateurs compatibles et validations" onmouseover="CreationCadreSurprise('Index','compatibility')" >Compatibilité et respect des normes</a>  | <a href="#"  title="Tueur de div" onmouseover="CreationCadreSurprise('Index','thanks')" >Remerciements à</a>


Voici la fonction 
CreationCadreSurprise('Index','thanks')" 


function CreationCadreSurprise(from,link){

	//On supprime la div, si elle existe déjà
	if (document.getElementById('cadreSurprise')){
		document.getElementById('cadreSurprise').parentNode.removeChild(document.getElementById('cadreSurprise'));
	} 

	var Divcreator=document.createElement('div'); //Je créé ma div
	Divcreator.id="cadreSurprise"; //je lui colle un id

	if(link=="compatibility"){
	
		var ImgExplorerecreator = document.createElement("img"); //Je créé l'image d'explorer
		ImgExplorerecreator.setAttribute("style","height:10%;width:10%"); //Je change les proprités de ImgExplorerecreator
		ImgExplorerecreator.src ="" // Je lui indique l'image
		ImgExplorerecreator.alt ="Logo Internet Explorer 8"; //En cas de non chargement de l'image.
		
		Divcreator.appendChild(ImgExplorerecreator); //On met l'image dans le cadre

		var TexteDivcreator=document.createTextNode(" | "); //On créé un séparateur
		Divcreator.appendChild(TexteDivcreator); //On met le séparateur dans le cadre.

		//etc etc		

	Divcreator.onmouseout = function(){document.getElementById('cadreSurprise').parentNode.removeChild(document.getElementById('cadreSurprise'))}; //Si la souris sort de cadre, il doit se détruire
	document.body.insertBefore(Divcreator,MarreDesBalisesDeBasDePageQOnAppelleFooter);//Je place mon cadre avant mon footer
}


J'ai tout détaillé en commentaires. La fonction sort à créer un cadre et à incorporer des images à l'intérieur. La fonction ... fonctionne. Le cadre est bien créé et les images bien intégrées à l'intérieur. Lorsque je quitte mon cadre, celui-ci se détruit bien. Smiley biggrin

Le problème : Lorsque je passe sur une des images (sur un lien), le cadre aussi se détruit.
Question : pourquoi et comment y remédier? Smiley decu

Merci d'avance pour vos conseils
Modifié par ledisciple (12 Sep 2013 - 10:19)
Salut,

Ouais, le onmouseout se déclenche lorsqu'on survole un enfant de la div, en l'occurrence l'image. Le code ci-dessous va résoudre ton problème, sauf pour IE qui ne supporte par relatedTarget.


Divcreator.onmouseout = function(event){
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
	document.getElementById('cadreSurprise').parentNode.removeChild(document.getElementById('cadreSurprise'))
}; //Si la souris sort de cadre, il doit se détruire


Pour éviter d'horribles prises de têtes avec IE, il semble que le plus cool soit de passer par JQuery.

EDIT 1 : Je trouve cette longue discussion sur stackoverflow .
EDIT 2 : Une autre, au sujet de la non-compatibilité d'IE, sur stackoverflow
Modifié par petibato (12 Sep 2013 - 15:07)
Bonjour

Merci pour ta réponse

petibato a écrit :

Pour éviter d'horribles prises de têtes avec IE, il semble que le plus cool soit de passer par JQuery.


heu JQuery Smiley fache j'aime pas trop : je préfère maitriser mon code de bout en bout. Certe je vais peut-être réinventer la roue à chaque fois, mais je sais expliquer mon code de bout en bout. Smiley cligne
Oui, c'est sur, les fonction no reconnu par tel ou tel navigateur, c'est pas top.

Ma solution (pas top, je sais, mais compatible avec tous)

En gros, je mets toute mes images dans un premier cadre (cadre surprise). En dessous de ce premier cadre surprise, je créé un autre cadre, à peine plus grand que le premier (quelques px) et positionné au même endroit.

Plutôt que de faire disparaitre le cadre suprise quand on sort de celui-ci(ou que l'on rentre sur une image), je fais disparaitre l'ensemble (cadreSurprise et cadre surprise2) lorsque je suis dessus le cadresurprise2.

En gros :

html :
<div id="MarreDesBalisesDeBasDePageQOnAppelleFooter">
	<a href="#"  title="Clique moi !" id="OngletStatistiques" onclick="Statistiques()" onmouseover="CreationCadreSurprise('Index','','OngletStatistiques')">Statistiques</a> | <a href="http://www.arbitre.net/forum/index.php?act=idx" id="OngletForum" onmouseover="CreationCadreSurprise('Index','','OngletForum')" title="Clique moi !" target="_blank">Forum arbitres</a> | <a id="OngletWriteMe" onmouseover="CreationCadreSurprise('Index','','OngletWriteMe')" title="N'hésitez pas à me faire part de vos commentaires. Ils sont précieux pour moi!" href="http://www.arbitre.net/forum/index.php?showuser=7118" target="_blank">Contactez-moi !</a> | <a href="#"  title="Menu" onmouseover="CreationCadreSurprise('Index','menu','OngletMenu')" id="OngletMenu" >Menu</a> | <a href="#" id="OngletCompatibility"  title="Navigateurs compatibles et validations" onmouseover="CreationCadreSurprise('Index','compatibility','OngletCompatibility')" >Compatibilité et respect des normes</a>  | <a href="#" id="OngletRemerciements"  title="Super forum!" onmouseover="CreationCadreSurprise('Index','thanks','OngletRemerciements')" >Remerciements à</a>
</div>


js :

function CreationCadreSurprise(from,link,onglet){
	
	//Un peu de décoration
	var Listedesonglets=[{"Nom":"OngletCompatibility"},{"Nom":"OngletStatistiques"},{"Nom":"OngletForum"},{"Nom":"OngletWriteMe"},{"Nom":"OngletMenu"},{"Nom":"OngletRemerciements"}];
	var tailleListedesonglets = Listedesonglets.length;
	
	//On supprime la div, si elle existe déjà
	if (document.getElementById('cadreSurprise') || document.getElementById('cadreSurprise2')){
		document.getElementById('cadreSurprise').parentNode.removeChild(document.getElementById('cadreSurprise'));
		document.getElementById('cadreSurprise2').parentNode.removeChild(document.getElementById('cadreSurprise2'));
	}
		RendApparenceNormaleOnglets(Listedesonglets,tailleListedesonglets); //Pour certains éléments du menu, le cadre surprise ne s'affiche pas, car il n'y a rien à mettre dedans. Il faut quand même retirer la mise en forme bidon.
		var x=document.getElementById(onglet);
		x.setAttribute("style","background:rgb(255, 255, 255);color:rgb(0, 84, 130);text-decoration:none;");

	if(link!=""){
		var Divcreator=document.createElement('div'); //Je créé ma div
		Divcreator.id="cadreSurprise"; //je lui colle un id

		var Divcreator2=document.createElement('div'); //Je créé ma div
		Divcreator2.id="cadreSurprise2"; //je lui colle un id

		if(link=="compatibility"){
	
			var ImgExplorerecreator = document.createElement("img"); //Je créé l'image d'explorer
			ImgExplorerecreator.setAttribute("style","height:31px;width:123px"); //Je change les proprités de ImgExplorerecreator
			ImgExplorerecreator.src ="http://imaps.dfg.ca.gov/viewers/jsapi/ospr/images/logos/IE8.png" // Je lui indique l'image
			ImgExplorerecreator.alt ="Logo Internet Explorer 8"; //En cas de non chargement de l'image.
		
			Divcreator.appendChild(ImgExplorerecreator); //On met l'image dans le cadre

			var TexteDivcreator=document.createTextNode(" | "); //On créé un séparateur
			Divcreator.appendChild(TexteDivcreator); //On met le séparateur dans le cadre.

			//etc etc

		}
		Divcreator2.onmouseover = function(){document.getElementById('cadreSurprise').parentNode.removeChild(document.getElementById('cadreSurprise'));RendApparenceNormaleOnglets(Listedesonglets,tailleListedesonglets);document.getElementById('cadreSurprise2').parentNode.removeChild(document.getElementById('cadreSurprise2'))};
		document.body.insertBefore(Divcreator,MarreDesBalisesDeBasDePageQOnAppelleFooter);//Je place mon cadre avant mon footer
		document.body.insertBefore(Divcreator2,MarreDesBalisesDeBasDePageQOnAppelleFooter);//Je place mon cadre avant mon footer
	}
}


css

#cadreSurprise{
bottom:5%;
position:absolute;
background:rgb(0, 84, 130);
color: rgb(250, 250, 250);
padding:2px;
width:50%;
height:6%;
z-index:10;
}
#cadreSurprise2{
bottom:7%;
position:absolute;
background:transparent;
color: rgb(250, 250, 250);
padding:2px;
margin:2px;
width:80%;
z-index:0;
height:6%;
}
#MarreDesBalisesDeBasDePageQOnAppelleFooter{
background:rgb(0, 84, 130);
color:rgb(255, 255, 255);
padding:1%;
width:98%;
bottom: 0px;
position: absolute;
height:2%;
}
Dacodac, à vérifier si l'événement est bien déclenché même en cas de déplacement rapide de la souris. Je te le souhaite !

C'est vrai que parfois, on charge JQuery un peu pour grand chose, c'est la solution de facilité, mais bon... difficile de résister au chant de cette belle sirène !

Enfin, je vois que tu t'obliges à utiliser des noms français, ça c'est cool Smiley cligne . A bas les id="content-wrapper" !
Sujet clos
Aller à