11548 sujets

JavaScript, DOM et API Web HTML5

Interpretation

Bonjour,
je rencontre un problème avec un script js que je viens d'intégrer à mon site. Voici le script en question :

	document.getElementById('Logo').onmouseover = function() {document.getElementById('Menu').style.display = 'block';}
	document.getElementById('Logo').onmouseout = function() {document.getElementById('Menu').style.display = 'none';}
	document.getElementById('Menu').onmouseover = function() {document.getElementById('Menu').style.display = 'block';}
	document.getElementById('Menu').onmouseout = function() {document.getElementById('Menu').style.display = 'none';}

	var expr = new RegExp("/","g");
	var tags = document.getElementById('Menu').getElementsByTagName('ul');
	[b]tags = tags[0].getElementsByTagName('a');[/b]
	
	for (var i=0;i<tags.length;i++) {
		tags[ i].onmouseover = function() {Fonctions.Globales.MenuAff(this.rel);this.className = 'Active';}
	}

Fonctions.Globales.MenuAff: function(this.rel) {
var tags = document.getElementById('Menu').getElementsByTagName('ul');
		tags = tags[0].getElementsByTagName('a');
		
		for (var i=0;i<tags.length;i++) tags[ i].className = '';
		
		var C = document.getElementById('Menu').getElementsByTagName('div');
		
		for (i=0;i<C.length;i++) 
			if (C[ i].className == 'Contenu')
				C[ i].style.display = 'none';
				
		document.getElementById(id).style.display = 'block';
}

Maintenant la strcture html correspondante :

<a><img src="/inc/css/default/icones/logo.png" alt="logo" id="Logo"/></a>
<!-- du contenu //-->
<div id="Menu">
	<ul class="Tabs">
		<li><a href="/journal/" rel="Journal" class="Active">Journal</a></li>
		<li><a href="/projets/" rel="Projets">Projets</a></li>
	</ul>
	<div class="Contenu" id="Journal">
		&nbsp;
	</div>
	<div class="Contenu" id="Projets">
		&nbsp;
	</div>
</div>

Le but de se script est d'afficher le menu contenu dans la div#Menu au survol du logo img#Logo. Mais dèjà à ce niveau, IE6 bloque... Je signale que le script fonctionne parfaitement sur les autres navigateurs a ma disposition (Firefox, Safari, Camino et Opera) et ne provoque pas d'erreurs - simplement des avertissements en raison des filtres d'opacité utilisés dans le css. Le résultat sous IE est que rien ne se passe au survol du logo mais que le logo disparait lorsque la souris quitte son champ...

Auriez-vous des idées vis-à-vis des raisons de ce problème ?

Merci,
ramy.
Modifié par ramy (18 Mar 2007 - 08:57)
Apres avoir codé une fonction errorHandler pour javascript, je constate que l'erreur vient de la ligne tags = tags[0].getElementsByTagName('a'); - mise en gras ci-dessus. Il semblerait que getElementsByTagName renvoit '0' sous Internet Explorer.

Je pensais pourtant que getElementById et getElementsByTagName faisaient parties de ces fonctions spécialement bien supportées par les navigateurs.

Déception.
Modifié par ramy (18 Mar 2007 - 08:58)
Hello,

Le résultat que tu obtiens n'est pas si étonnant que ça quand on voit que ton lien n'a aucun attribut. Smiley cligne

IE ne doit dans ce cas pas l'ajouter à l'arbre DOM.
Les attributs href et title du lien sont définis mais je les ai supprimé ici car il me semblait que l'auto-promotion n'était pas admise sur les forums d'alsacréations.
Modifié par ramy (19 Mar 2007 - 08:48)
Hello,
ramy a écrit :
Les attributs href et title du lien sont définis mais je les ai supprimé ici car il me semblait que l'auto-promotion n'était pas admise sur les forums d'alsacréations.
D'accord, au temps pour moi (mais tu aurais plus mettre href="#" par exemple).

Ton problème vient du fait que pour document.getElementById("Menu"), IE renvoie le lien qui a pour name "Menu". C'est un bug d'IE, mais c'est de toute façon une très mauvaise idée d'utiliser un name et un id identiques sur plusieurs éléments. En général, on utilise la même valeur pour name et id :
<a href="#" id="Menu" name="Menu">...
Sujet clos
Aller à