Afficher tableau dynamiquement Javascript

rgoezinn · 29 Novembre 2005

Bonjour à tous,

J'ai un soucis avec le code d'une page Web. Plus précisément, le code qui me pose problème fonctionne sous Firefox mais pas sous IE.

Sur une page Web, j'ai plusieurs images superposées, et suivant la zone sur laquelle je passe l'image affichée n'est pas la même. Ceci fonctionne sans problème. Ceci correspond a "document.images[object].style.visibility = 'visible';" dans mon code Javascript.

J'aimerais afficher un petit tableau en même temps que je passe sur les zones définies ci-dessus. Cela me pose problème sous IE. Je cherche à afficher les tableaux définis dans les sections <DIV> en utilisant le code javascript "document.getElementById(object).style.visibility = 'visible';". Les ID des <DIV> figurent également dans mon fichier css.

Voici un extrait de mon code CSS :

Code:

#Secteur1
{
   position: absolute;
   top: 150px;
   left: 700px;
   z-index: 10;
   visibility: hidden;
}

Voici le code de ma page (épuré : j'ai enlevé entre autres les coordonnées COORDS des maps pour plus de lisibilité)

Code:

<html>
	<head>
		<title>www.agri-indus.fr - Nous joindre</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
		<link rel="stylesheet" type="text/css" href="styleAI.css">
		<script language="javascript">
		<!--
			function show(object)
			{
				document.images['Secteur1'].style.visibility = 'hidden';
				document.images['Secteur2'].style.visibility = 'hidden';
				document.images['Secteur3'].style.visibility = 'hidden';
				document.getElementById('Secteur1').style.visibility = 'hidden';
				document.getElementById('Secteur2').style.visibility = 'hidden';
				document.getElementById('Secteur3').style.visibility = 'hidden';
	
				document.images[object].style.visibility = 'visible';
				document.getElementById(object).style.visibility = 'visible';
			}
	
			function hide(object)
			{
				document.images[object].style.visibility = 'hidden';
				document.getElementById(object).style.visibility = 'hidden';
			}
		-->
		</script>
	</head>


	<body>
	<div id="corps">
				Contactez le repr&eacute;sentant rattach&eacute; &agrave; votre secteur.<br>
	
				<img id="imageAcces1" src="./imgAcces/Nord5.gif" usemap="#carte1" width="800">
				<map NAME="carte1">
					<area shape="POLY" COORDS="" onmouseover="show('Secteur1')">
					<area shape="POLY" COORDS="" onmouseover="show('Secteur2')">
					<area shape="POLY" COORDS="" onmouseover="show('Secteur3')">
				</map>

				<img id="imageAcces2" src="./imgAcces/Nord5_1.gif" usemap="#carte2" width="800" name="Secteur1">
				<map NAME="carte2">
					<area shape="POLY" COORDS="" onmouseout="hide('Secteur1')">
					<area shape="POLY" COORDS="" onmouseover="show('Secteur2')">
					<area shape="POLY" COORDS="" onmouseover="show('Secteur3')">
				</map>

				<img id="imageAcces2" src="./imgAcces/Nord5_2.gif" usemap="#carte3" width="800" name="Secteur2">
				<map NAME="carte3">
					<area shape="POLY" COORDS="" onmouseover="show('Secteur1')">
					<area shape="POLY" COORDS="" onmouseout="hide('Secteur2')">
					<area shape="POLY" COORDS="" onmouseover="show('Secteur3')">
				</map>

				<img id="imageAcces2" src="./imgAcces/Nord5_3.gif" usemap="#carte4" width="800" name="Secteur3">
				<map NAME="carte4">
					<area shape="POLY" COORDS="" onmouseover="show('Secteur1')">
					<area shape="POLY" COORDS="" onmouseover="show('Secteur2')">
					<area shape="POLY" COORDS="" onmouseout="hide('Secteur3')">
				</map>

				<div id="Secteur1">
					<table border="1" bordercolor="orange">
						<tr>
							<td>
								<font size=3 color="#ff8800">
									Contact 1<br>
									T&eacute;l&eacute;phone : 12.34.56.78.90
								</font>
							</td>
						</tr>
					</table>
				</div>

				<div id="Secteur2">
					<table border="1" bordercolor="orange">
						<tr>
							<td>
								<font size=3 color="#ff8800">
									Contact 2<br>
									T&eacute;l&eacute;phone : 12.34.56.87.90
								</font>
							</td>
						</tr>
					</table>
				</div>

				<div id="Secteur3">
					<table border="1" bordercolor="orange">
						<tr>
							<td>
								<font size=3 color="#ff8800">
									Contact 3<br>
									T&eacute;l&eacute;phone : 12.34.56.78.09
								</font>
							</td>
						</tr>
					</table>
				</div>	
			<br>
		</div>
	</body>
</html>

Merci pour vos réponses

Rob

KangOl · 30 Novembre 2005

1/ balise

Code:

2/ c'est quoi l'erreur ?

rgoezinn · 30 Novembre 2005

Salut,

1/ Désolé pour la balise. Ca y est je l ai rajoutée.

2/ Le problème est le suivant : les tableaux contenus dans mes <div></div> ne s'affichent pas sous IE alors qu il s affichent sous FireFox

Merci

Rob

rgoezinn · 4 Décembre 2005

Pas d'idées ???

Afficher tableau dynamiquement Javascript

rgoezinn

KangOl

rgoezinn

rgoezinn