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
| <html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
</script>
<style>
#fire { position: absolute;top: 10em; right: 20em;}
#secu{
position: absolute;
top: 25em;
right:58em;
display: none;
}
#services{
position: absolute;
top: 25em;
right:40em;
display: none;
}
#infogerance{
position: absolute;
top: -25em;
right:22em;
}
#cloud{
position: absolute;
top: 25em;
right:-16em;
}
#ok{
position: absolute;
top: 55em;
right:5em;
}
#stop{
position: absolute;
top: 55em;
right:0em;
}
</style>
</head>
<body>
<img id="fire" src="firefox.png" title="Logo" height="500" width="650" align="middle"/>
<img id="secu" src="secu.png" title="Image de la secu" height="150" width="280" align="middle"/>
<img id="services" src="services.jpg" title="Image de services" height="150" width="280" align="middle"/>
<img id="infogerance" src="infogerance.jpg" title="Image d'infogerance" height="150" width="280" align="middle"/>
<img id="cloud" src="cloud.jpg" title="Image de cloud" height="150" width="280" align="middle"/>
<input id="ok" type="button" value="Go"></input>
<input id="stop" type="button" value="Stop"/></p>
</body>
</class>
<script type="text/javascript">
$('#fire').click(function(){
$('#fire').fadeOut(2000);
$('#secu').delay(1000).show(2000);
$("#stop").click(function(){
$("#secu").stop();
});
});
$('#secu').click(function(){
$('#services').slideDown(2000);
$("#stop").click(function(){
$("#services").stop();
});
});
$('#services').click(function(){
$('#infogerance').animate({'top':'25em'}, 2000 );
$("#stop").click(function(){
$("#infogerance").stop();
});
});
$('#infogerance').click(function(){
$('#cloud').animate({'left':'59em'}, 2000 );
$("#stop").click(function(){
$("#cloud").stop();
});
});
</script>
</html> |
Partager