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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Daniel Hagnoul" />
<title>Page type</title>
<style type="text/css">
body {
background-color:#696969;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:medium;
font-style:normal;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
}
h1,h2,h3,h4,h5 {
font-family:"Times New Roman", Times, 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;
}
div#conteneur {
width:95%;
margin:12px auto;
padding:6px;
background-color:#FFFFFF;
color:#000000;
border:1px solid #666666;
font-size:0.8em;
}
div#statusbar {
position:fixed;
left:12px;
right:12px;
bottom:12px;
top:inherit;
width:inherit;
height:inherit;
background-color:#FFFFCC;
border:1px solid #000000;
padding:6px;
font-size:1.2em;
font-weight:bold;
}
div#statusbar span {
color:#0000FF;
text-decoration:underline;
cursor:pointer;
padding-left:12px;
}
div#affiche {
position:absolute;
top:-1px;
left:12px;
width:300px;
height:0px;
overflow:hidden;
z-index:2000;
display:none;
background-color:#99FFCC;
border:1px solid #999999;
font-size:0.9em;
font-weight:normal;
}
div#infos {
position:absolute;
top:-1px;
left:102px;
width:100px;
height:0px;
overflow:hidden;
z-index:2100;
display:none;
background-color:#CCCC99;
border:1px solid #FF0000;
font-size:0.9em;
font-weight:normal;
}
</style>
<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnAffiche").click(function(){
if($("#affiche").css("display") == "none"){
$("#affiche").animate(
{
top: "-=300px",
height: "300px",
display: "block"
},
3000
);
} else {
$("#affiche").fadeOut(3000, function(){
$(this).css({
top: "-1px",
height:"0px",
display: "none"
});
});
}
});
$("#btnInfos").click(function(){
if($("#infos").css("display") == "none"){
$("#infos").animate(
{
top: "-=500px",
height: "500px",
display: "block"
},
3000
);
} else {
$("#infos").fadeOut(3000, function(){
$(this).css({
top: "-1px",
height:"0px",
display: "none"
});
});
}
});
});
</script>
</head>
<body>
<div id="conteneur">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
</p>
<p>
Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
</p>
<p>
Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
</p>
<p>
Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
</p>
<p>
Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
</p>
<p>
Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
</p>
<p>
Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
</p>
<p>
Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
</p>
<p>
Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
</p>
<p>
Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
</p>
<p>
Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
</p>
<p>
Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
</p>
<p>
Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus. Curabitur eget magna iaculis tellus pulvinar sagittis. Maecenas eget urna. Nunc scelerisque, justo ultricies luctus consectetur, enim ante aliquam urna, sed ullamcorper quam orci nec arcu. Sed volutpat ligula quis elit. Donec vitae neque vel ipsum ultricies accumsan. Aenean imperdiet tincidunt augue. Morbi elementum metus a dui. Nunc non turpis. Maecenas vel odio non justo bibendum varius. Morbi tincidunt orci et purus. Duis mattis ullamcorper odio.
</p>
</div>
<div id="statusbar">
<span id="btnAffiche">Affiche</span><span id="btnInfos">Informations</span>
<div id="affiche">
<p>
Pellentesque quam. Morbi ornare. Sed sodales laoreet felis. Maecenas adipiscing fermentum lorem. Aenean sed odio et nisl cursus dignissim. Pellentesque laoreet lacus a tortor. Vivamus sem risus, venenatis non, pretium a, tincidunt et, sem. Ut tincidunt velit cursus lorem. Aliquam fringilla mauris. Nunc sit amet diam. Fusce ullamcorper. Aliquam tempor, erat volutpat convallis tristique, ligula sapien pellentesque neque, vitae vulputate velit augue sodales ante. Mauris dapibus. Donec laoreet turpis eu dolor. Nam at sem quis justo vehicula venenatis. Phasellus tincidunt vestibulum ipsum.
</p>
</div>
<div id="infos">
<p>
Pellentesque quam. Morbi ornare. Sed sodales laoreet felis. Maecenas adipiscing fermentum lorem. Aenean sed odio et nisl cursus dignissim. Pellentesque laoreet lacus a tortor. Vivamus sem risus, venenatis non, pretium a, tincidunt et, sem. Ut tincidunt velit cursus lorem. Aliquam fringilla mauris. Nunc sit amet diam. Fusce ullamcorper. Aliquam tempor, erat volutpat convallis tristique, ligula sapien pellentesque neque, vitae vulputate velit augue sodales ante. Mauris dapibus. Donec laoreet turpis eu dolor. Nam at sem quis justo vehicula venenatis. Phasellus tincidunt vestibulum ipsum.
</p>
</div>
</div>
</body>
</html> |
Partager