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
| <html>
<head>
<title>test javascript barre </title>
<style type="text/css">
#opacity-area, #width-area, #height-area { background:url(barre.jpg) 0 8px no-repeat; height:23px; width:500px; margin:0 0 5px 0; }
#opacity-slider, #width-slider, #height-slider { background:url(curseur.jpg) no-repeat; width:33px; height:23px; cursor:pointer; }
</style>
<script type="text/javascript" src="pj/moo1.js"></script>
<script type="text/javascript">
window.addEvent('domready', function () {
/* opacity slider */
var mySlide = new Slider($('opacity-area'), $('opacity-slider'), {
steps: 100,
wheel: 1,
onChange: function(step){
$('opacity-label').setHTML(step);
$('muse').set('opacity',step / 100);
}
}).set(100);
/* height slider */
var mySlide = new Slider($('height-area'), $('height-slider'), {
steps: 300,
wheel: 1,
onChange: function(step){
$('height-label').setHTML(step);
$('muse').set('height',step);
}
}).set(300);
/* width slider */
var mySlide = new Slider($('width-area'), $('width-slider'), {
steps: 300,
wheel: 1,
onChange: function(step){
$('width-label').setHTML(step);
$('muse').set('width',step);
}
}).set(300);
});
</script>
</head>
<body>
<img src="muse.jpg" id="muse" />
<div id="opacity-area">
<div id="opacity-slider"></div>
</div>
<div>
<strong>Opacité:</strong> <span id="opacity-label"></span>%
</div>
<br /><br />
<div id="width-area">
<div id="width-slider"></div>
</div>
<div>
<strong>Largeur:</strong> <span id="width-label"></span> pixels
</div>
<br /><br />
<div id="height-area">
<div id="height-slider"></div>
</div>
<div>
<strong>Auteur:</strong> <span id="height-label"></span> pixels
</div>
<br /><br />
</body>
</html> |
Partager