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
|
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>-_/\_- Guy Dev. -_/\_-</title>
<!-- un p'tit CSS pour la présentation -->
<style type="text/css">
</style>
<!-- insertion du JavaScript -->
<script type="text/javascript">
function slider(mini, maxi) {
// propriétés
this.min = mini;
this.max = maxi;
this.i_ligne = "line_black.gif";
this.i_slider = "icon.gif";
this.currValue = 0;
this.isDragable = false;
// propriétés utiles au drag !
this.posX;
this.posY;
this.Ox;
this.Oy;
// méthodes
this.affiche = sliderAffiche;
this.initDrag = initDrag;
this.drag = drag;
this.resetDrag = resetDrag;
}
function sliderAffiche(left, top) {
docBody = document.getElementsByTagName('BODY').item(0);
// insertion de la Div dans laquelle sera affiché le slider
myDiv = document.createElement('DIV');
myDiv.style.backgroundColor = "#FFFFBB";
myDiv.style.position = "absolute";
myDiv.style.top = top+'px';
myDiv.style.left = left+'px';
docBody.appendChild(myDiv);
// insertion du slider lui-même
sliderLine = document.createElement('IMG');
slider = document.createElement('IMG');
sliderLine.src = this.i_ligne;
slider.src = this.i_slider;
slider.style.position = 'absolute';
slider.style.top = (sliderLine.offsetTop+9)+'px';
slider.style.left = (sliderLine.offsetLeft-4)+'px';
myDiv.appendChild(sliderLine);
myDiv.appendChild(slider);
myDiv.onmousedown = this.initDrag;
myDiv.onmouseup = this.resetDrag;
myDiv.onmousemove = this.drag;
}
function initDrag(e) {
this.isDragable = true;
this.Ox = e.clientX;
this.Oy = e.clientY;
this.posX = slider.offsetLeft;
this.posY = slider.offsetTop;
}
function drag(e) {
if(this.isDragable) {
newPosX = e.clientX-(this.Ox-this.posX);
slider.style.left = newPosX+'px';
}
}
function resetDrag(e) {
this.isDragable = false;
}
function init() {
test = document.getElementById('test');
mySlider = new slider(0, 50);
mySlider.affiche(200,100);
}
</script>
</head>
<body onLoad="init()">
</body>
</html> |
Partager