Div masqué affiché sur evenements

**javaboy** · 07/01/2008, 13h40

Bonjour à tous et avant toute chose bonne année,

Quand j'était petit j'ai réalisé ce script pour afficher cacher un div :

Le js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function Write(nom, contenu)
	{
		document.all[nom].innerText = contenu ;
		var layer = document.all.infos;
		layer.style.visibility = 'visible';
	}
 
function Hide()
	{
		var layer = document.all.infos;
		layer.style.visibility = 'hidden';
	}

Et le code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title> Catalogue </title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<link href="style/catalog.css" rel="stylesheet" type="text/css">
	<script src="js/menuaide.js"></script>
</head>
 
<body>
	<div id="infos" style="position: absolute; visibility: hidden; left:400px; top:120px; width: 300px;">
		<table cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="border: thin dotted #B0C4DE;" width="100%">
			<tr style="height: 30px;">
				<td style="background-color: #F5F5F5;" style="border-bottom-color: #B0C4DE; border-bottom-style: dotted; border-bottom-width: thin; width: 10%;"><img src="img/info.png" alt="Infos:" border="0"></td>
				<td style="background-color: #F5F5F5;" style="border-bottom-color: #B0C4DE; border-bottom-style: dotted; border-bottom-width: thin;"><b><p style="vertical-align: middle;">Informations :</p></b></td>
			</tr>
			<tr>
				<td colspan="2">
					<div id="informations" style="height: 300px;"></div>
				</td>
			</tr>
		</table>
	</div>
 
	<h1 align="center"><font color="#486E8E">CATALOG</font></h1>
	<HR NOSHADE WIDTH="900" SIZE="1" >
	<table border="1" width="100%" align="center" >
		<tr bgcolor="#2d3658">
			<th width="170px"><font color ="white">Models</font></th>
			<th><font color ="white">Images</font></th>
			<th><font color ="white">Plus d'informations</font></th>
			<th><font color ="white">Caracteristics</font></th>
			<th width="100px"><font color ="white">Prices (TTC)</font></th>
			<th><font color ="white">Caddy</font></th>
		</tr>
		<tr bgcolor="#bdc4dd">
			<td  id="ProCurve_2810">
				ProCurve 2810-24G J9021A
			</td>
			<td>
				<img src="img\produits\ProCurve_2810-24G_J9021A.jpg"/>
			</td>
			<td>
				<a href ="#" onMouseOver="javascript:Write('informations', 'Ceci est un test')" onMouseOut="javascript:Hide()"><img src="img/info.png" border="0"/></a>
			</td>
			<td>
				Commutateur - 20 ports + 2 modules GBIC
			</td>
		</tr>
		<tr>
			<td id="ProCurve_2650">
				ProCurve 2650 J4899C
			</td>
			<td>
				<img src="img\produits\ProCurve_2650_J4899C.jpg"/>
			</td>
			<td>
				<a href ="#" onMouseOver="javascript:Write('informations', 'Ceci est un test')" onMouseOut="javascript:Hide()"><img src="img/info.png" border="0"></a>
			</td>
			<td>
				Commutateur - 48 ports
			</td>
		</tr>
	</TABLE>
</body>

Maintenant je suis grand heu oui on est quand même en 2008 et je croi que le "document.all" est laissé à l'abandon et il est remplacé par document.getElementById, mais je n'arrive pas à faire fonctionner correctement ce bout de code ...
Merci pour votre aide .

**E.Bzz** · 07/01/2008, 13h43

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.all[nom].innerText = contenu ;

==>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById(nom).innerHTML = contenu ;

Sinon, il faut enlever le "javascript:" du code des évènements (qui s'écrivent en minuscules) : cf. ton onmouseover.

A+

**javaboy** · 07/01/2008, 13h57

En effet .innerHTML fonctionne bien mieu je l'avait complétement oublié celui la !

Merci pour ton aide .

Div masqué affiché sur evenements

JavaScript

Discussions similaires

Partager

Partager