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
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta name="Author" content="Daniel Hagnoul" />
<title>Page type</title>
<style>
body {
background-color:#dcdcdc;
color:#000000;
font-family:sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
h1,h2,h3,h4,h5 {
font-family:serif;
}
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
margin:0px;
padding:0px;
}
p {
padding:6px;
}
ul,ol,dl {
list-style:none;
padding-left:6px;
padding-top:6px;
}
li {
padding-bottom:6px;
}
/* TEST */
.image1 {
background-color:#dcdcdc;
color:#000000;
font-family:sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
margin:12px;
padding:6px;
border:1px solid #999999;
width:400px;
height:400px;
background-image:url("../images/imageTest.png");
}
.image2 {
background-color:#dcdcdc;
color:#000000;
font-family:cursive;
font-size:medium;
font-style:italic;
font-weight:bold;
line-height:normal;
letter-spacing:normal;
margin:12px;
padding:6px;
border:1px solid #999999;
width:600px;
height:200px;
background-image:url("../images/bg.gif");
}
</style>
<script charset="CP-1252" src="../lib/jquery-1.4.1.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$("body").toggleClass("image2");
});
});
</script>
</head>
<body class="image1">
<button id="btn">Changer</button>
<p>
Donec ultrices lectus et nibh mattis pharetra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tristique erat vel massa. Morbi faucibus pulvinar ipsum. Cras venenatis, felis et molestie vehicula, ante dui semper sem, vitae fermentum erat urna posuere lectus. Fusce rhoncus, libero ut laoreet vulputate, sapien nibh varius urna, eu suscipit neque nulla ut justo. In rutrum augue quis lacus. Vestibulum ultricies, turpis vel auctor egestas, risus dolor semper nisl, eu rhoncus sem ante a lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed at justo a purus volutpat auctor.
</p>
</body>
</html> |
