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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Une façon de faire...</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
margin: 0 2em;
padding:0;
font: 1em/1.25em Verdana;
}
#conteneur{
font-family: Arial, sans-serif;
text-align:center;
min-height:8em;
clear:both; /* par prudence */
}
#conteneur h1{
font-size:0.6em;
font-weight:normal;
line-height:3em;
border:1px solid #888;
border-radius:0.5em;
margin:0.5em auto 1em;
cursor:pointer;
width:20em;
/* effet bouton */
background: #EEE;
background: -webkit-linear-gradient( #EEE, #AAA);
background: -moz-linear-gradient( #EEE, #AAA);
background: -ms-linear-gradient( #EEE, #AAA);
background: -o-linear-gradient( #EEE, #AAA);
background: linear-gradient( #EEE, #AAA);
}
#conteneur div{
float:left;
height:100%;
width:47%; /* 2+47+2+47+2 = 100 */
margin-left:2%;
min-height:8em;
background-color: #0a7aaf;
border: 4px ridge #e9e9e9;
box-sizing: border-box;
}
#conteneur ul{
display:none; /* masquée au départ */
margin:0;
padding:0;
}
#conteneur li{
display:inline-block;
}
#conteneur li a{
text-decoration:none;
}
#conteneur li img{
height:4em;
display:block;
border:0;
}
</style>
</head>
<body>
<h1>Une façon de faire...</h1>
<div id="conteneur">
<div>
<h1>Montrer les réfèrences légales</h1>
<ul>
<li><a href="https://www.phpbb.com/" target="_blank"><img src="http://img.xooimage.com/files110/2/4/e/phpbbcom-489477b.png" alt="phpbb.com" title="accédez Phpbb.com"></a></li>
<li><a href="http://www.phpbb-fr.com/" target="_blank"><img src="http://img.xooimage.com/files110/a/4/a/phpbbfr-4894786.png" alt="phpbb-fr.com" title="accédez Phpbb-fr.com"></a></li>
<li><a href="http://www.amarid.fr" target="_blank"><img src="http://img.xooimage.com/files110/2/a/f/amarid-4894792.png" alt="amarid.fr" title="accédez Amarid"></a></li>
</ul>
</div>
<div>
<h1>Montrer nos réseaux sociaux</h1>
<ul>
<li><a href="https://www.facebook.com/amarid.associationnationaleamarid?fref=ts" target="_blank"><img src="http://img.xooimage.com/files110/1/4/a/facebook-4894913.png" alt="facebook" title="accédez Facebook"></a></li>
<li><a href="https://twitter.com/amarid2" target="_blank"><img src="http://img.xooimage.com/files110/3/5/c/twitter-4894925.png" alt="twitter" title="accédez Twitter"></a></li>
<li><a href="https://plus.google.com/u/0/" target="_blank"><img src="http://img.xooimage.com/files110/5/f/5/gogle--4894931.png" alt="Google +" title="accédez Google +"></a></li>
</ul>
</div>
</div>
<script>
var oH1 = document.querySelectorAll('#conteneur h1'),
oUL = document.querySelectorAll('#conteneur ul'),
i, nb = oH1.length;
for( i=0; i<nb; i++){
oH1[i].objUl = oUL[i];
oH1[i].onclick = function(){
var isVisible = this.objUl.offsetWidth;
if( isVisible){
this.objUl.style.display = 'none';
this.innerHTML = this.innerHTML.replace('Cacher', 'Montrer');
}
else{
this.objUl.style.display = 'block';
this.innerHTML = this.innerHTML.replace('Montrer', 'Cacher');
}
};
}
</script>
</body>
</html> |
Différents problèmes liés au cadres
Répondre avec citation
Envoyé par mariok
Partager