11550 sujets

JavaScript, DOM et API Web HTML5

Menu : onMouseOut foireux.

Boujour,

J'ai quelques problèmes avec des onMouseOut qui ne s'exécutent pas et je ne sais pas trop pourquoi.

Le HTML qui va bien :

<!-- [Menu] -->
<div id="conteneurMenuContenu">
	<!-- Bandeaux -->
	<div id="conteneurBandeauAccueilContenu"></div>
	<div id="conteneurBandeauCreationContenu"></div>
	<div id="conteneurBandeauImpressionContenu"></div>
	<div id="conteneurBandeauDiffusionContenu"></div>
	<div id="conteneurBandeauContactsContenu"></div>
	<!-- Textes -->
	<div id="conteneurTexteAccueilContenu" onMouseUp="menuContenu('accueil')" onMouseOver="menuContenuOver('accueil')" onMouseOut="menuContenuOut('accueil')"><img src="./images/menuContenu/texteAccueil.png"></div>
	<div id="conteneurTexteCreationContenu" onMouseUp="menuContenu('creation')" onMouseOver="menuContenuOver('creation')" onMouseOut="menuContenuOut('creation')"><img src="./images/menuContenu/texteCreation.png"></div>
	<div id="conteneurTexteImpressionContenu" onMouseUp="menuContenu('impression')" onMouseOver="menuContenuOver('impression')" onMouseOut="menuContenuOut('impression')"><img src="./images/menuContenu/texteImpression.png"></div>
	<div id="conteneurTexteDiffusionContenu" onMouseUp="menuContenu('diffusion')" onMouseOver="menuContenuOver('diffusion')" onMouseOut="menuContenuOut('diffusion')"><img src="./images/menuContenu/texteDiffusion.png"></div>
	<div id="conteneurTexteContactsContenu" onMouseUp="menuContenu('contacts')" onMouseOver="menuContenuOver('contacts')" onMouseOut="menuContenuOut('contacts')"><img src="./images/menuContenu/texteContacts.png"></div>
</div>


Et son javascript :

function menuContenu(nom)
{	
	//<-- Reinitialisation bandeaux --> 
	
	document.getElementById("conteneurBandeauAccueilContenu").style.visibility = "hidden";
	document.getElementById("conteneurBandeauCreationContenu").style.visibility = "hidden";
	document.getElementById("conteneurBandeauImpressionContenu").style.visibility = "hidden";
	document.getElementById("conteneurBandeauDiffusionContenu").style.visibility = "hidden";
	document.getElementById("conteneurBandeauContactsContenu").style.visibility = "hidden";
	
	//<-- Reinitialisation textes -->
	
	document.getElementById("conteneurTexteAccueilContenu").innerHTML = '<img src="./images/menuContenu/texteAccueil.png">';
	document.getElementById("conteneurTexteCreationContenu").innerHTML = '<img src="./images/menuContenu/texteCreation.png">';
	document.getElementById("conteneurTexteImpressionContenu").innerHTML = '<img src="./images/menuContenu/texteImpression.png">';
	document.getElementById("conteneurTexteDiffusionContenu").innerHTML = '<img src="./images/menuContenu/texteDiffusion.png">';
	document.getElementById("conteneurTexteContactsContenu").innerHTML = '<img src="./images/menuContenu/texteContacts.png">';
	
	//<-- Affectation -->
	
	if(nom == "accueil")
	{
		document.getElementById("conteneurBandeauAccueilContenu").style.visibility = "visible";
		chargerPage('contenu/accueil/accueil.html','conteneurPageContenu');
	}
	else if(nom == "creation")
	{
		document.getElementById("conteneurBandeauCreationContenu").style.visibility = "visible";
		chargerPage('contenu/creation/creation.html','conteneurPageContenu');
	}
	else if(nom == "impression")
	{
		document.getElementById("conteneurBandeauImpressionContenu").style.visibility = "visible";
		chargerPage('contenu/impression/impression.html','conteneurPageContenu');
	}
	else if(nom == "diffusion")
	{
		document.getElementById("conteneurBandeauDiffusionContenu").style.visibility = "visible";
		chargerPage('contenu/diffusion/diffusion.html','conteneurPageContenu');
	}
	else if(nom == "contacts")
	{
		document.getElementById("conteneurBandeauContactsContenu").style.visibility = "visible";
		chargerPage('contenu/contacts/contacts.html','conteneurPageContenu');
	}
}

function menuContenuOver(nom)
{	
	if(nom == "accueil")
	{
		document.getElementById("conteneurTexteAccueilContenu").innerHTML = '<img src="./images/menuContenu/texteAccueilOver.png">';
	}
	else if(nom == "creation")
	{
		document.getElementById("conteneurTexteCreationContenu").innerHTML = '<img src="./images/menuContenu/texteCreationOver.png">';
	}
	else if(nom == "impression")
	{
		document.getElementById("conteneurTexteImpressionContenu").innerHTML = '<img src="./images/menuContenu/texteImpressionOver.png">';
	}
	else if(nom == "diffusion")
	{
		document.getElementById("conteneurTexteDiffusionContenu").innerHTML = '<img src="./images/menuContenu/texteDiffusionOver.png">';
	}
	else if(nom == "contacts")
	{
		document.getElementById("conteneurTexteContactsContenu").innerHTML = '<img src="./images/menuContenu/texteContactsOver.png">';
	}
}

function menuContenuOut(nom)
{	
	alert('ok');
	if(nom == "accueil")
	{
		document.getElementById("conteneurTexteAccueilContenu").innerHTML = '<img src="./images/menuContenu/texteAccueil.png">';
	}
	else if(nom == "creation")
	{
		document.getElementById("conteneurTexteCreationContenu").innerHTML = '<img src="./images/menuContenu/texteCreation.png">';
	}
	else if(nom == "impression")
	{
		document.getElementById("conteneurTexteImpressionContenu").innerHTML = '<img src="./images/menuContenu/texteImpression.png">';
	}
	else if(nom == "diffusion")
	{
		document.getElementById("conteneurTexteDiffusionContenu").innerHTML = '<img src="./images/menuContenu/texteDiffusion.png">';
	}
	else if(nom == "contacts")
	{
		document.getElementById("conteneurTexteContactsContenu").innerHTML = '<img src="./images/menuContenu/texteContacts.png">';
	}
}


Voila, Merci.
SAlut !

J'ai modifié un peu tes fonctions et maintenant j'ai quelque chose qui fonctionne :

HTML

<!-- [Menu] --> 
<div id="conteneurMenuContenu"> 
    <!-- Bandeaux --> 
    <div id="conteneurBandeauAccueilContenu">Accueil</div> 
    <div id="conteneurBandeauCreationContenu">Creation</div> 
    <div id="conteneurBandeauImpressionContenu">Impression</div> 
    <div id="conteneurBandeauDiffusionContenu">Diffusion</div> 
    <div id="conteneurBandeauContactsContenu">Contacts</div> 
    <!-- Textes --> 
    <div id="conteneurTexteAccueilContenu" onMouseUp="menuContenu(this)" onMouseOver="menuContenuOver(this)" onMouseOut="menuContenuOut(this)"><img src="./images/menuContenu/texteAccueil.jpg"></div> 
    <div id="conteneurTexteCreationContenu" onMouseUp="menuContenu(this)" onMouseOver="menuContenuOver(this)" onMouseOut="menuContenuOut(this)"><img src="./images/menuContenu/texteCreation.jpg"></div> 
    <div id="conteneurTexteImpressionContenu" onMouseUp="menuContenu(this)" onMouseOver="menuContenuOver(this)" onMouseOut="menuContenuOut(this)"><img src="./images/menuContenu/texteImpression.jpg"></div> 
    <div id="conteneurTexteDiffusionContenu" onMouseUp="menuContenu(this)" onMouseOver="menuContenuOver(this)" onMouseOut="menuContenuOut(this)"><img src="./images/menuContenu/texteDiffusion.jpg"></div> 
    <div id="conteneurTexteContactsContenu" onMouseUp="menuContenu(this)" onMouseOver="menuContenuOver(this)" onMouseOut="menuContenuOut(this)"><img src="./images/menuContenu/texteContacts.jpg"></div> 
</div>


et le code JavaScript :

function menuContenu(t) 
{     
    //<-- Reinitialisation bandeaux -->     
    document.getElementById("conteneurBandeauAccueilContenu").style.visibility = "hidden"; 
    document.getElementById("conteneurBandeauCreationContenu").style.visibility = "hidden"; 
    document.getElementById("conteneurBandeauImpressionContenu").style.visibility = "hidden"; 
    document.getElementById("conteneurBandeauDiffusionContenu").style.visibility = "hidden"; 
    document.getElementById("conteneurBandeauContactsContenu").style.visibility = "hidden"; 
     
    //<-- Reinitialisation textes -->      
    document.getElementById("conteneurTexteAccueilContenu").firstChild.src = './images/menuContenu/texteAccueil.jpg'; 
    document.getElementById("conteneurTexteCreationContenu").firstChild.src = './images/menuContenu/texteCreation.jpg'; 
    document.getElementById("conteneurTexteImpressionContenu").firstChild.src = './images/menuContenu/texteImpression.jpg'; 
    document.getElementById("conteneurTexteDiffusionContenu").firstChild.src = './images/menuContenu/texteDiffusion.jpg'; 
    document.getElementById("conteneurTexteContactsContenu").firstChild.src = './images/menuContenu/texteContacts.jpg'; 
     
    //<-- Affectation -->
    var nom = trouverNom(t.id);
    document.getElementById("conteneurBandeau"+nom+"Contenu").style.visibility = "visible"; 
} 
 
function menuContenuOver(t) 
{     
    var image = trouverNom(t.id);
    t.firstChild.src = './images/menuContenu/texte'+image+'Hover.jpg';
} 
 
function menuContenuOut(t) 
{
    var image = trouverNom(t.id);
    t.firstChild.src = './images/menuContenu/texte'+image+'.jpg';
}

function trouverNom(image) {
    
    var tmp = image.substring(14);//on supprime "conteneurTexte" qui fait 14 caractères
    return tmp.substring(0, tmp.indexOf('Contenu')); //on garde tout entre le caractère 0 et le caractère avant "Contenu"
}
Merci pour ta réponse,

Je sais pas trop d'ou venais le problème mais le fait d'utiliser de l'ajax pour afficher la page concernée devait surement être la cause du problème, enfin...

Pour des raisons de simplicité j'ai choisi un menu plus simple : pas de Over ou de Out juste du Click (avec un Href).

Pour ceux que ça intéresseraient, le site est en beta : ici.

Merci.
Modifié par iFef (23 Jul 2010 - 18:23)
Sujet clos
Aller à