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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<style type = "text/css">
#contenu1 {
width: 300px;
height: 200px;
font-size: 200%;
background-color: yellow;
position: absolute;
left: 300px;
top: 100px;
}
#contenu2 {
width: 300px;
height: 200px;
font-size: 200%;
background-color: yellow;
position: absolute;
left: 300px;
top: 100px;
}
h2 {
width: 10em;
border: 5px double black;
background-color: lightgray;
text-align: center;
font-family: sans-serif
}
</style>
<script type = "text/javascript"
src = "jquery-1.3.2.min.js"></script>
<script type = "text/javascript">
//<![CDATA[
function init(){
$("#contenu1").hide();
$("#contenu2").hide();
$("#bouton1").click(function_fadeIn);
$("#bouton2").click(function_fadeIn2);
} // fin de init
function function_fadeIn(){
$("#contenu1").fadeIn("slow"); // on fade in
$("#contenu1").fadeOut("slow",function_fadeIn2); // on fade out
} // fin de fadeIn
function function_fadeIn2(){
$("#contenu2").fadeIn("slow"); // on fade in
$("#contenu2").fadeOut("slow",function_fadeIn); // on fade out
} // fin de fadeIn
$(init); // On initialise les fonction et on masque les DIV
$(function_fadeIn);// lancement de la premiere fonction
//]]>
</script>
<title>hideShow.html</title>
</head>
<body>
<h2 id = "bouton1">bouton 1</h2>
<h2 id = "bouton2">bouton 2</h2>
<p id = "contenu1">
Contenu 1
</p>
<p id = "contenu2">
Contenu 2
</p>
</body>
</html> |
Partager