Div masqué affiché sur evenements
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:
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:
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 .
