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
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta name="Author" content="Daniel Hagnoul" />
<title>Page type</title>
<style type="text/css">
body {
background-color:#dcdcdc;
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#affiche {
margin:12px;
border:1px solid #999999;
}
/* TEST */
div#affiche img {
width:32px;
height:32px;
border:1px dotted grey;
margin:12px;
padding:6px;
}
div.info_et {
display:block;
}
</style>
<script type="text/javascript" src="../lib/jquery-1.4a2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// montrer
$('#slick-down').click(function() {
$('.info_et').slideDown('slow');
return false;
});
// cacher
$('#slick-up').click(function() {
$('.info_et').slideUp('fast');
return false;
});
// cacher en cliquant sur la div.info_et
$('.info_et').click(function() {
$(this).slideToggle(400);
return false;
});
});
</script>
</head>
<body>
<div id="conteneur">
<div id="affiche">
<!-- URL img non disponibles -->
<img id="slick-down" src=" " alt="montrer" title="montrer" />
<img id="slick-up" src=" " alt="cacher" title="cacher" />
<div class="info_et">
<p>
Ut sagittis lobortis dolor. Sed aliquam velit. Nulla ultrices, nisi ut ultrices ullamcorper, arcu erat auctor ante, a malesuada elit enim vel neque. Cras imperdiet lacus non lectus. Nulla sodales, diam id fermentum pellentesque, dolor urna interdum quam, et lacinia turpis dui vitae diam. Integer ut mauris. Nam ligula. Morbi lobortis, lectus ut dictum elementum, justo tortor rutrum erat, nec fringilla eros nisi in nisl. Sed quis quam a est accumsan congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tempor. Integer vestibulum, justo vel suscipit lacinia, erat urna aliquet nulla, ac malesuada nunc neque vitae dolor. Ut vel nisi. Vivamus urna ligula, molestie scelerisque, congue quis, venenatis non, urna. Praesent mi ipsum, vulputate ac, pharetra eu, interdum eu, urna. Nullam felis nunc, aliquet a, eleifend a, mollis id, nunc. Phasellus sodales. Aliquam consectetur leo non odio.
</p>
<p>
Praesent egestas, ante sed sagittis fermentum, ligula nulla viverra tortor, at lacinia massa felis quis arcu. Mauris malesuada neque. Maecenas sed justo. Aliquam dui libero, consectetur at, iaculis eu, aliquam vitae, eros. Nullam lorem felis, iaculis eget, tincidunt eget, mollis ac, arcu. In pellentesque mauris eget quam. In non magna. Maecenas vulputate eleifend purus. Sed imperdiet malesuada augue. Sed dolor purus, faucibus non, elementum feugiat, condimentum et, elit. Vestibulum vitae felis.
</p>
<p>
Sed porta. Sed non magna. Suspendisse ullamcorper pretium enim. Fusce iaculis vulputate lacus. Nulla facilisi. Etiam tincidunt dui ut erat. Donec non est. Maecenas sagittis, sem vitae dictum hendrerit, mi tellus ornare dolor, in euismod sapien diam a ante. Donec ullamcorper mollis lacus. Morbi sed arcu. Curabitur nec purus. Proin ut mauris. Quisque orci. Phasellus enim felis, faucibus in, placerat et, sagittis id, tellus. In eu sapien.
</p>
<p>
Nam volutpat, felis vitae tempus malesuada, arcu mauris lobortis lorem, non pretium dui diam eu augue. Curabitur non nisi sed libero posuere feugiat. Vivamus luctus tristique nisl. Proin vel lectus. Nunc vitae leo eget arcu ultrices pretium. Integer cursus nisi. Nulla quis justo quis nibh hendrerit vulputate. Nam tristique, diam in egestas ullamcorper, sapien quam faucibus leo, id vehicula eros arcu id mi. Morbi neque justo, tempus in, luctus id, mattis sed, metus. Praesent tincidunt risus id lacus. Quisque vitae dolor. Morbi dignissim nibh nec elit. Morbi pulvinar ligula non velit. In hac habitasse platea dictumst. Etiam ornare tristique nibh. Donec consequat, ipsum id luctus commodo, ipsum lacus accumsan eros, ut viverra justo risus at justo. In turpis felis, mollis nec, bibendum ut, vehicula ac, velit. Donec pulvinar eleifend ligula. In tempor eros quis diam tincidunt fermentum. Fusce gravida ultricies metus.
</p>
</div>
</div>
</div>
</body>
</html> |
Partager